vuex 在typescript中的详细使用: vuex-class

我们要说的vuex在ts文件中的使用主要是利用vuex-class！

安装vuex-class

$ npm install --save vuex-class
# or
$ yarn add vuex-class

Example

直接上代码，主要用法在代码中已经完全体现了，大家感受一下 。

import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
const missionModule = namespace('mission');
@Component
export default class ViewMenuConditionComponent extends Vue {
  @missionModule.Getter('getTaskProps') taskProps;   //模块内getters用法，
  @missionModule.Getter('getConditionValues') conditionValues;
  @Action('foo') actionFoo     //全局的action调用方法
  @Mutation('foo') mutationFoo   //全局的mutation调用方法

  created () {
    this.taskProps // -> store.mission.taskProps
    this.conditionValues // -> store.mission.conditionValues
    
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
  }
}

注意：

1、从以上代码中可以看出，当分模块调用内部的getters,actions,mutations时，需要引入namespaces,并且调用的时候需要加上@namespacesName

相关代码：
import { namespace } from 'vuex-class';

const missionModule = namespace('mission');

@missionModule.Getter('getTaskProps') TaskProps;  //在调用的时候可以直接this.TaskProps

2、当在ts中调用全局的state、getters、 actions、mutations时，可以直接通过@State、@Actions、@Getters、@Mutations来获取，在调用时，可以直接使用this来调用。

相关代码：

import { State, Getter, Action, Mutation} from 'vuex-class';

@State('foo') stateFoo     //全局的state调用方法
@Action('foo') actionFoo     //全局的action调用方法
@Mutation('foo') mutationFoo   //全局的mutation调用方法
@Getters('foo') getterFoo   //全局的getters调用方法

3、当获取的state，getters，actions，mutations的值和我们要设置的值相同时，可以直接省去，例如下方：

 @State foo
 @Getter bar
 @Action baz
 @Mutation qux


//可以直接通过this.foo/this.bar/this.baz/this.qux来调用