1.在根state下定义数据，以及设置获取数据

store/index.ts

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        lang:String,
    },
    mutations: {
      lang(state,n){
        state.lang = n;
      }
    },
    actions: {
      setLang(content,data){
          content.commit('lang',data);
      }
    },
    getters:{
      getLang:state =>{
        return state.lang;
      }
    }
});

2.view 页面调用，赋值及取值

操作前如果没有安装vuex-class依赖，请执行npm install vuex-class --save

index.vue

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import {Action,Getter,namespace} from 'vuex-class';
    import {ServerApi,langPackage} from "../assets/api";
    @Component
    export default class index extends Vue {
        @Action('setLang') setLang:any;
        @Getter('getLang') getLang:any;

        protected label? : string;
        protected languag : any[] = langPackage.homeContent;
 
        langEvent() : void{
            if(this.label === 'cnName')this.label = 'enName';
            else this.label = 'cnName';
            this.setLang(this.label);
            localStorage.setItem('lang',this.getLang);
        }

        get langFlag(){
            return this.getLang;
        }
        created(){
            if(localStorage.getItem('lang')){
                this.setLang(localStorage.getItem('lang'));
                this.label = localStorage.getItem('lang') || '';
            }else {
                this.label = 'cnName';
                localStorage.setItem('lang','cnName');
                this.setLang('cnName');
            }
        }

    }
</script>

页面功能是做一个双语切换 get 相当于vue-cli2时使用的 computer计算属性，在动态监听store的值，由于store的值在刷新后就不存在，所以结合缓存storage使用

3.modules的使用

新建一个modules模块，routerSessionModule.ts，开启命名空间，保证数据独立性，可读性

export default {
    namespaced:true,// 开启命名空间

    state: {
        onePathIndex:Number,
    },
    mutations: {
        onePathIndex(state,n){
            state.onePathIndex = n;
        }
    },
    actions: {
        setOnePathIndex(context,data){
            context.commit('onePathIndex',data);
        }
    },
    getters:{
        getOnePathIndex:state =>{
            return state.onePathIndex;
        }
    },

};

4.view中调用

首先要在store/index.ts中注册modules

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

import routerSessionModule from './modules/routerSessionModule'// 导入模块

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        lang:String,
    },
    mutations: {
      lang(state,n){
        state.lang = n;
      }
    },
    actions: {
      setLang(content,data){
          content.commit('lang',data);
      }
    },
    getters:{
      getLang:state =>{
        return state.lang;
      }
    },
// 模块配置
    modules: {
        routerSessionModule
    },
});

index.vue 调用

 

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import {Action,Getter,namespace} from 'vuex-class';
    import {ServerApi,langPackage} from "../assets/api";
    // 通过命名空间声明模块
    const routerSessionModule = namespace('routerSessionModule');
    @Component
    export default class index extends Vue {
        @Action('setLang') setLang:any;
        @Getter('getLang') getLang:any;
        // 设置和取值
        @routerSessionModule.Action('setOnePathIndex') setOnePathIndex:any ;
        @routerSessionModule.Getter('getOnePathIndex') getOnePathIndex:number ;

        protected label? : string;
        protected languag : any[] = langPackage.homeContent;
 
        navTabsEvent(item,index):void{
            this.$router.push(item.path);
            this.currentIndex = index;
            this.isShow = false;
            // 设置调用同在store下一样使用
            this.setOnePathIndex(index);
            console.log(this.getOnePathIndex)
            sessionStorage.setItem('onePathIndex',JSON.stringify(index))
        }


        langEvent() : void{
            if(this.label === 'cnName')this.label = 'enName';
            else this.label = 'cnName';
            this.setLang(this.label);
            localStorage.setItem('lang',this.getLang);
        }

        get langFlag(){
            return this.getLang;
        }
        created(){
            if(localStorage.getItem('lang')){
                this.setLang(localStorage.getItem('lang'));
                this.label = localStorage.getItem('lang') || '';
            }else {
                this.label = 'cnName';
                localStorage.setItem('lang','cnName');
                this.setLang('cnName');
            }
        }

    }
</script>

如有错误，ts菜鸟欢迎指正