https://blog.csdn.net/bbsyi/article/details/107532935
https://www.jianshu.com/p/08ff82cf4616
下载地址:https://www.npmjs.com/package/vuex-class
$ npm install --save vuex-class
# or
$ yarn add 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']
}
}
二、测试示例
目录:
├─src
├─ store
├─ ├─ index.ts
├─ ├─ modules
├─ └─ └─ test.ts
├─ page
└─ └─ test.vue
store/index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import test from './modules/test';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
test
}
});
store/modules/test.ts
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
};
src/pages/test.vue
import {
State,
Getter,
Action,
Mutation,
namespace
} from 'vuex-class';
const someModule = namespace('test');
export default class Test extends Vue {
@someModule.State(state => state.menulist) menulist;
@someModule.Action('saveMenuListFN') saveMenuListFN;
}