vue typescript vuex使用

一、下载vuex-class

下载地址：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;
}

转载：https://www.jianshu.com/p/08ff82cf4616