vue3+typescript+vu3x项目开发 （ 四）结合vuex

搜索vu3+typescript+vuex，网上例子一大把，但自己需要的那种帖子却少的可怜。

做正真的工程项目的时候vuex是必不可少的，一般都会分模块来管理store，而网上的例子大部分是不分模块的。

第一步：废话不多说了，首先定义LoginStore.ts。

const initState: any = {
  menulist: "store测试"
};

const mutations = {};

// actions
const actions = {
  //获取当前登录设计信息
  routeUrl: function({ commit, state }: any, { backFun }: any) {
    backFun();
  }
};
// getters
const getters = {};

export default {
  namespaced: true,
  state: initState,
  getters,
  actions,
  mutations
};

注意：这个地方必须写，不然就不对了

namespaced: true,

第二步：注册store

import Vue from "vue";
import Vuex, { Store } from "vuex";
//登录模块
import loginStore from "@/store/system/LoginStore";

Vue.use(Vuex);

//定义loading状态 变化接口
interface loadingInterface {
  isLoading: boolean;
}
let defStore = {
  namespaced: true,
  state: {
    isLoading: false,
    loginInfo: false
  },
  mutations: {
    //修改loading状态
    updateLoadingStatus(state: any, payload: loadingInterface) {
      state.isLoading = payload.isLoading;
    },
    //修改登录状态
    updateLoginState(state: any, payload: any) {
      state.loginInfo = true;
    }
  },
  modules: {
    loginStore //登录界面的状态
  },
  actions: {}
};
const store: Store<any> = new Vuex.Store(defStore);
export default store;

注册模块

  modules: {
    loginStore //登录界面的状态
  },

第三步：在vue界面使用store里面的值，写了个测试例子

<template>
  <div class="login_area_div" id="login_area_div">
    测试
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";

const someModule = namespace("loginStore");

@Component({
  components: {}
})
export default class ComLogin extends Vue {
  @someModule.State(state => state.menulist) menulist: any;
  mounted() {
    alert(this.menulist);
  }
}
</script>

关键代码：根据命名空间导入模块

const someModule = namespace("loginStore");

根据命名空间获取state

  @someModule.State(state => state.menulist) menulist: any;

如果是在js中执行action的方法，而又不想通过@someModule.Action来获取，则需要通过命名空间+"/"+action名字取获取"loginStore/routeUrl"，

 store.dispatch("loginStore/routeUrl", {
      backFun: function() {
        store.commit("updateLoginState", {});
        next();
      }
    });