vue3中进行vuex的分包管理（typescript）

最新vuex与ts结合文章，请查看https://blog.csdn.net/Ag_wenbi/article/details/118101881?spm=1001.2014.3001.5501

1、首先创建如下的目录结构，modules文件夹里面的名称根据自己情况来

2、打开index.ts，引入对应的包结构，引入之后会报错，因为包nav与user还没有任何内容

import { createStore } from "vuex";
import nav from './modules/nav';
import user from './modules/user';

export default createStore({
    modules:{
        nav,
        user
    }
});

3、打开nav.ts，设置如下结构，先解决第二步的报错问题

const state = {
    count:0,
    navData:[{
        id:1,
        name:'首页',
        pid:0
    },{
        id:2,
        name:'测试页',
        pid:0
    }]
}
const actions = {
    
}
const mutations = {
    
}
export default {
    namespaced:true,
    state,
    actions,
    mutations
}

4、同理第三步，打开user.ts

const state = {
    userData:[{
        id:1,
        name:'张三',
        ord:'zhangsan'
    }]
}
const actions = {
    
}
const mutations = {
    
}
const getters = {
    
}
export default {
    namespaced:true,
    state,
    actions,
    mutations,
    getters
}

5、接下来的步骤，我们就拿nav.ts做案例（user.ts可以看完后自己跟着操作一遍），设置如下

interface navDataItem{
    id:number;
    name:string;
    pid:number;
}
export interface StateProps{//导出供index.ts使用
    count:number;//这里的key值(count)对应常量state下的key
    navData:navDataItem[]//这里的key值(navData)对应常量state下的key
}

const state = {
    count:0,
    navData:[{
        id:1,
        name:'首页',
        pid:0
    },{
        id:2,
        name:'测试页',
        pid:0
    }]
}
const actions = {
    
}
const mutations = {
    
}
export default {
    namespaced:true,
    state,
    actions,
    mutations
}

6、接下来我们增加actions里的方法

import { ActionContext } from 'vuex';

interface navDataItem{
    id:number;
    name:string;
    pid:number;
}
export interface StateProps{//导出供index.ts使用
    count:number;//这里的key值(count)对应常量state下的key
    navData:navDataItem[]//这里的key值(navData)对应常量state下的key
}

const state = {
    count:0,
    navData:[{
        id:1,
        name:'首页',
        pid:0
    },{
        id:2,
        name:'测试页',
        pid:0
    }]
}
const actions = {
    changeCount(ctx:ActionContext<StateProps,{}>,newCount:number){
        ctx.commit("changeCount_",newCount);//对应mutations的方法，这一步暂时还没有
    },
    pushNavItem(ctx:ActionContext<StateProps,{}>,navItem:navDataItem){
        ctx.commit("pushNavItem_",navItem);//对应mutations的方法，这一步暂时还没有
    }
}
const mutations = {
    
}
export default {
    namespaced:true,
    state,
    actions,
    mutations
}

7、增加mutations里的方法

import { ActionContext } from 'vuex';

interface navDataItem{
    id:number;
    name:string;
    pid:number;
}
export interface StateProps{//导出供index.ts使用
    count:number;//这里的key值(count)对应常量state下的key
    navData:navDataItem[]//这里的key值(navData)对应常量state下的key
}

const state = {
    count:0,
    navData:[{
        id:1,
        name:'首页',
        pid:0
    },{
        id:2,
        name:'测试页',
        pid:0
    }]
}
const actions = {
    changeCount(ctx:ActionContext<StateProps,{}>,newCount:number){
        ctx.commit("changeCount_",newCount);
    },
    pushNavItem(ctx:ActionContext<StateProps,{}>,navItem:navDataItem){
        ctx.commit("pushNavItem_",navItem);
    }
}
const mutations = {
    changeCount_(state:StateProps,newCount:number){//方法名注意跟actions里的对应
        state.count = newCount;
    },
    pushNavItem_(state:StateProps,navItem:navDataItem){//方法名注意跟actions里的对应
        state.navData.push(navItem);
    }
}
export default {
    namespaced:true,
    state,
    actions,
    mutations
}

8、user.ts自己对照上面操作完成，操作完成之后，我们重新修改下index.ts

import { createStore } from "vuex";
import nav,{StateProps as navState} from './modules/nav';//引入额外导出的模块
import user,{StateProps as UserState} from './modules/user';//引入额外导出的模块

export type StateProps = {//导出对应的模块包
    nav:navState,
    user:UserState
};
export default createStore<StateProps>({//使用模块包
    modules:{
        nav,
        user
    }
});

9、至此，vuex设置已经完成，接下来就是在具体界面中使用

<template>
    <div>
        <div>{{JSON.stringify(userData)}}</div>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent} from 'vue';
import {useStore} from 'vuex';
import {StateProps} from '../../store';
export default defineComponent({
    name:'vuexCom',
    setup () {
        const store = useStore<StateProps>();
        const userData = computed(() => store.state.user.userData);
        store.dispatch('user/pushUser',{//注意要加模块名user
            id:2,
            name:'李四',
            ord:'lisi'
        });
        return {
            userData
        }
    }
})
</script>

<style scoped>

</style>

10、可以看到，这些都是有提示的