vue + typescript + vuex + vuex-class 如何使用！！！！！

vue + typescript + vuex + vuex-class 如何使用！！！！！

按照别的博主的一贯作风，先粘贴官方例子，官方例子如下（放心，我不会让你失望的）

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @someModule.Getter('foo') moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

一看比较懵。不知道咋用。然后看下面的代码吧

// 这是我引入store的页面 （大概写一下）
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace,
} from 'vuex-class';
const someModule = namespace('loginVUEX');
export default class Login extends Vue { 
		@someModule.State(state => state.menulist) menulist;
		@someModule.Action('saveMenuListFN') saveMenuListFN;
}

// 这是我导出 store的代码
import Vue from 'vue';
import Vuex from 'vuex';
import loginVUEX from './modules/login';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    loginVUEX,
  },
});

// 这是我store的代码
import { Commit } from 'vuex';
const state: any = {
  menulist: [],
};

const mutations: any = {
  saveMenuList(states: any, params: object) {
    states.menulist = params;
  },
};

const actions: any = {
  saveMenuListFN(context: { commit: Commit }, params: object) {
    context.commit('saveMenuList', params);
  },
};

export default {
    namespaced: true, // namespaced为false的时候，state,mutations,actions全局可以调用，为true，生成作用域，引用时要声明模块名称
    state,
    mutations,
    actions,
};

这下应该明白 怎么用了吧。
下面简单说明下 vuex-class 的方法

如果你单独这样用 State
@State(‘string’) target
里面的 string 是你store 统一导出的 store的名称，(比如我的统一导出是 loginVUEX)
target 是 自定义的名称。 只需要这样注入以后，你就可以在当前页面 console.log(this.target) 你就知道咋回事了。

如果你使用 nameSpace 这个方法
需要先定义一个命名空间
const tempSpace = nameSpace(‘string’)
这里面的 string 是 你store 统一导出的 store的名称。
然后
@tempSpace.State(state => state.menulist) menulist
上面的state 就是你这个 模块的sotre里面定义的state 。（看上面我的代码 menulist 就知道）
这个 menulist 就是你在当前页面自定义的名称，（我为了方便粘贴就没还名称）
你打印一下 menulist 就知道咋回事了。

如果有不明白的，可以发邮件 zhenghaiyang20062006@126.com