Vuex 单状态库与多模块状态库详解

2023-09-04 10:32:04 358

什么情况下使用vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，如果您不打算开发大型单页应用，使用Vuex可能是繁琐冗余的。如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex将会成为自然而然的选择。

之前在做旅游页的时候对Vuex进行了简单的了解。近期在做Vue项目的同时重新学习了Vuex。本篇博文主要总结一下Vuex单状态库和多模块modules的两类使用场景。

本篇所有代码是基于Vue-Cli3.x版本的脚手架工具进行编写的。

vuex单状态库Demo

这是一个仅有单个Vuexstore状态库的Demo。当项目中使用一个Vuex状态库就已经足够的时候，可以使用这种方式。

本Demo使用了一个increment与decrement的增/减事件来体现store数据的变化。

store.js

由于状态库是单一的，仅有一个store.js文件管理状态库。在该文件中一开始进行import的引入，然后使用Vue.use(Vuex)使用Vuex，之后分别定义state、mutations和actions，并通过exportdefaultnewVuex.Store({state,mutations,actions})模块化。

//store.js
importVuefrom'vue'
importVuexfrom'vuex'

Vue.use(Vuex)

conststate={
count:1
}

constmutations={
increment(state){
state.count++
},
decrement(state){
state.count--
}
}

constactions={
increment:({commit})=>{
commit('increment')
},
decrement:({commit})=>{
commit('decrement')
}
}

exportdefaultnewVuex.Store({state,mutations,actions})

main.js

在入口文件main.js中通过import引入store，并注册到Vue的实例上。

importVuefrom'vue'
importAppfrom'./App.vue'
importstorefrom'./store'

//Vue-Cli3.x
newVue({
render:h=>h(App),
router,
store
}).$mount('#app')

//Vue-Cli2.x
//newVue({
//el:'#app',
//router,
//store,
//components:{App},
//template:''
//})

使用$store

在相应的组件中如下引入并在methods中使用mapActions。

Demo

关于单状态库的Demo请参考此github

GithubDemo

vuex多模块状态库Demo

当项目变得非常庞大，单个store无法满足需求的时候，可以通过多模块状态库管理多个store，将各类状态分类进行维护。

本Demo使用了add与reduce的增/减事件来体现store数据的变化。

store

由于需要管理多个store，因此在项目目录中创建store文件夹，并创建modules文件夹用来放置各个store文件，并使用index.js作为入口文件。具体结构请查看Demo。

main.js

同样在main.js中通过import引入store，但这里是引入index.js这个入口文件。

importVuefrom'vue'
importAppfrom'./App.vue'
importstorefrom'./store/index'

使用$store

除了使用方式有一定不同之外，methods中的mapActions也更换了书写方式，第一个参数是对应store管理的数据，第二个参数是关于操作事件的数组。



pagea{{$store.state.countA.countA}}

增加
删减

Demo

关于多模块状态库的Demo请参考此github

GithubDemo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Vuex 单状态库与多模块状态库详解

热门推荐

随机推荐