vue-cli3 + ts + vuex
Posted gionlee
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli3 + ts + vuex相关的知识,希望对你有一定的参考价值。
推荐使用vuex-class 官方介绍
npm install --save vuex-class # or yarn add vuex-class
本文也围绕着vuex-class进行介绍(目前我就会这一种)主要介绍取值和赋值使用方法说明如下:
store.ts中的写法:
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); export default new Vuex.Store({ state: { count:0 }, mutations: { setCount(state,value) { state.count = value } },
actions: {
setCount(state,value) {
this.commit(‘setCount‘,value)
}
},
});
取值或赋值的写法:
import {Component, Vue} from ‘vue-property-decorator‘; import {State, Action, Mutation} from ‘vuex-class‘; @Component({}) export default class Main extends Vue { @State(‘count‘) stateCount: any @Mutation(‘setCount‘) setStateCount: any @Action(‘setCOunt‘) asyncSetStateCount: any created() { console.log(this.stateCount) // 取值 this.setCount({value:1}) // 同步赋值 this.asyncSetStateCount({value:2}) //异步赋值 } }
以上是关于vue-cli3 + ts + vuex的主要内容,如果未能解决你的问题,请参考以下文章
vue-cli+webpack+router+vuex---之vuex使用
在 vue-cli 3 项目中使用带有 npm-link 的 vuex store 会丢失 $store