## Vuex
1 概念与理解
2 五大核心模块
new Vuex.Store({
state: {
},
mutations: {
changeName(state, paylaod) {
...
}
},
actions: {
getUsername(context,payload) {
}
},
getters: {
***(state, getters) {
}
},
modules: {}
})
state-提供状态的地方
mutations-唯一修改状态的地方(方便状态被调试工具追踪)
actions-放异步请求
getters-计算属性
modules-定义子模块
3 如何操作这些核心模块
根级别state
$store.state.msg
...mapState(['msg'])
子模块级别state
$store.state.子模块名.msg
...mapState('模块名',['msg'])
根级别mutations
$store.commit('mutationName')
...mapMutations(['mutationName'])
子模块级别mutations
$store.commit('模块名/mutationName')
...mapMutations('模块名',['mutationName'])
根级别actions
$store.dispatch('actionName')
...mapActions(['actionName'])
子模块级别actions
$store.dispatch('模块名/ActionName')
...mapActions('模块名',['actionName'])
根级别getters
$store.getters.计算属性名
...mapGetters(['计算属性名'])
子模块级别getters
$store.getters['模块名/计算属性名']
...mapGetters('模块名',['计算属性名'])
总结
1 用辅助函数 ...mapXXX('模块名',['xxxx'])
2 尝试打印 $store.state $store.getters
Vue2项目 Vue3
vueX 的五大核心模块
最新推荐文章于 2024-02-28 09:40:26 发布
Vuex是一个专为Vue.js应用程序开发的状态管理模式,包括state(状态存储)、mutations(安全修改状态)、actions(处理异步操作)、getters(计算属性)和modules(模块化)。文章详细介绍了如何操作这些核心模块,如使用$store访问状态,以及在Vue2和Vue3项目中的应用。
摘要由CSDN通过智能技术生成