A Vuex store centralizes the state of your app, making it easy to reason about your state flow.

In this lesson we’ll see how we can create a Vuex store using TypeScript and use it on you class-based component by using the @State decorator from Vuex Class

Install:

npm i vuex vuex-class --save

Create store folder and index.ts, todos.ts file:

//store/index.ts

import Vue from 'vue';
import Vuex from 'vuex'; import todos from './todos'; Vue.use(Vuex); export default new Vuex.Store({
state: {
...todos,
},
mutations: { },
actions: { },
}); // store/todos.ts
import {State} from '../types'; const state: State = {
todos: [
{text: 'Buy milk'},
],
}; export default state;

Define the State interface:

// types.ts

export interface Todo {
text: string;
} export interface State {
todos: Todo[];
}

Using Store in main.ts:

import './hooks';

import Vue from 'vue';
import App from './App.vue';
import router from '@/router';
import store from '@/store/index';
import '@/registerServiceWorker';
Vue.config.productionTip = false; new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');

Create a Todos.vue component:

<template>
<ul>
<li v-for="todo in todos">{{ todo.text }}</li>
</ul>
</template> <script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {State} from 'vuex-class';
import {Todo} from '../types'; @Component({
})
export default class Todos extends Vue {
@State todos: Todo[]
}
</script>

See the commit

[Vuex] Create a Vuex Store using TypeScript的更多相关文章

  1. vuex中的this.$store.commit

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...

  2. vuex教程,vuex使用介绍案例

    1.demopageaction: import Vue from "vue"; import Store from "../../store.js"; imp ...

  3. 手摸手教你在vue-cli里面使用vuex,以及vuex简介

    写在前面: 这篇文章是在vue-cli里面使用vuex的一个极简demo,附带一些vuex的简单介绍.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 本文首发于我的个人 ...

  4. vuex基础(vuex基本结构与调用)

    import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const modulesA = { state:{//状态 count: ...

  5. Vuex 页面刷新后store保存的数据会丢失 取cookie值

    在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...

  6. vuex应用实例-this.$store.commit()触发

    新建文件夹store,store下: action.js const actions = {} export default actions; getter.js const getters = {} ...

  7. VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers

    数组 错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错 正确的写法:let listDate= state.playList.slice(); ...

  8. vuex介绍和vuex数据传输流程

    1.什么是vuex? 公共状态管理:解决多个非父子组件传值麻烦的问题:简单说就是多个页面都能用Vuex中store公共的数据 a.并不是所有的数据都要放在Vuex中,只有各个组件公用的一些数据会放在V ...

  9. [Vue + TS] Create Type-Safe Vue Directives in TypeScript

    Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create yo ...

随机推荐

  1. word,excel,ppt在线预览功能

    我们在开发web项目时,尤其类似oa功能时总会遇到上传附件并在线预览的功能,发现一款api比较好使,下面简单介绍一下. 微软官网本身提供了在线预览的API 首先将要预览的文档转成.docx,.xlsx ...

  2. 【JavaScript】对象

    No1: typeof操作符获取对象的类型 null的类型是object,Array的类型也是object,如果我们用typeof将无法区分出null.Array和通常意义上的object——{}. ...

  3. Certbot让网站拥有免费https证书

    网站使用http协议,在chrome浏览器中总是报不安全,看着就让人不爽,自己建的网站,不安全总是会让自己心慌慌.看到有头有脸的网站都是https开头,心中自然也想装逼一把,让自己的网站高端大气上档次 ...

  4. node.js监听文件变化

    前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了 ...

  5. Looping through the content of a file in Bash

    https://stackoverflow.com/questions/1521462/looping-through-the-content-of-a-file-in-bash One way to ...

  6. 页面嵌入iframe那些事儿

    一.用iframe如何把别人的页面嵌入自己的页面? <iframe src="http://blog.sina.com.cn/abc" frameBorder=0 scrol ...

  7. OSPF补全计划-0 preface

    哇靠,一看日历吓了我一跳,我这一个月都没写任何东西,好吧,事情的确多了点儿,同事离职,我需要处理很多untechnical的东西,弄得我很烦,中间学的一点小东西(关于Linux的)也没往这里记,但是我 ...

  8. MySQL firstmatch strategy

    在探讨subquery如 x IN (SELECT XX FROM TABLE)这样的形式的MATCH策略时,不是很清楚实现过程.在网上搜了一下, 地址:http://stackoverflow.co ...

  9. php 将16进制数串转换为二进制数据的函数

    /**     * 将16进制数串转换为二进制数据的函数     * @param $hexdata     * @return string bindata     */     function ...

  10. BZOJ5101 : [POI2018]Powód

    求出Kruskal重构树,那么重构树上每个点的取值范围是定的. 考虑树形DP,则对于一个点,要么所有点水位相同,要么还未发生合并. 故$dp[x]=up[x]-down[x]+1+dp[l[x]]\t ...