Vuex 单状态库与多模块状态库详解
什么情况下使用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。
Vuex全局Storecount{{$store.state.count}} 加 减
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。