使用TypeScript+Vuex

2020-02-18  本文已影响0人  nomooo

安装

npm install --save @vuets/vuex

直接上代码
store.ts/vuex.ts部分

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
// 定义类型
interface RootState {
  name: string;
}
export default new Vuex.Store({
  state: {
    // 初始值
    name: 'Mr Wang',
  },
  getters: {
    // 获取name方法
    getName: (state: RootState) => state.name,
  },
  mutations: {
    // 修改name方法
    changeName: (state: RootState, params: string) => {
      state.name = params;
    },
  },

});

使用部分

import { Getter } from '@vuets/vuex';
  // 获取name值
  @Getter('getName') public name!: string;
  public mounted() {
    console.log('第一次获取');
    console.log(this.name);
    setTimeout(() => {
      // 修改name值
      this.$store.commit('changeName', 'Mr Yang');
      console.log('第二次获取');
      console.log(this.name);
    }, 3000);
  }

打印截图

end

上一篇 下一篇

猜你喜欢

热点阅读