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

淩亂°似流年 2022-02-19 08:23 355阅读 0赞

搜索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();
          }
        });