vuex4.x+ts的简单用法

vuex4.x+ts的简单用法

vue3已经出来有段时间了，vuex4.x最近也刚刚出来，然后就想着用vue3+ts做一个项目
这篇文章用来记录vuex4.x 中module的使用

定义模块

命名空间

namespaced: true 命名空间 防止模块命名冲突
设置后调用mutations和action需要
‘模块名/方法’ 例如 app/setMenuList

export const app = {
    namespaced: true, // 防止模块命名冲突 设置后调用mutations和action需要
    //   '模块名/方法' 例如  app/setMenuList
    state: {
        menuList: [],
    },
    getters: {
        menuList: (state: any) => state.menuList,
    },
    mutations: {
        setMenuList(state: { menuList: any }, menu: any) {
            state.menuList = menu
        }
    },
    actions: {
        menuFn(store: any,data:any) {
                store.commit('setMenuList', data)

        },
    }
}

使用模块

• 在store/index.ts 文件中使用app模块

import { createStore } from "vuex";
import {app} from './modules/app'
export default createStore({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        app
    },
});

访问(在vue文件中使用)

一、加命名空间访问方式

1. 页面中获取state中值
   const menuList = store.state.app.menuList

2. getter
   const menuList = store.getters['app/menuList']

3. mutations
   store.commit('app/setMenuList', '要修改的数据')

4. action
   store.dispatch('app/menuFn', '要修改的数据')

二、不加命名空间访问方式

1. 页面中获取state中值
   const menuList = store.state.app.menuList

2. getter
   const menuList = store.getters.menuList

3. mutations
   store.commit('setMenuList', '要修改的数据')

4. action
   store.dispatch('menuFn', '要修改的数据')