vuex4.x+ts的简单用法
vue3已经出来有段时间了,vuex4.x最近也刚刚出来,然后就想着用vue3+ts做一个项目
这篇文章用来记录vuex4.x 中module的使用
定义模块
命名空间
namespaced: true
命名空间 防止模块命名冲突
设置后调用mutation
s和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文件中使用)
一、加命名空间访问方式
-
页面中获取state中值
const menuList = store.state.app.menuList
-
getter
const menuList = store.getters['app/menuList']
-
mutations
store.commit('app/setMenuList', '要修改的数据')
-
action
store.dispatch('app/menuFn', '要修改的数据')
二、不加命名空间访问方式
-
页面中获取state中值
const menuList = store.state.app.menuList
-
getter
const menuList = store.getters.menuList
-
mutations
store.commit('setMenuList', '要修改的数据')
-
action
store.dispatch('menuFn', '要修改的数据')