大项目中为了方便管理,责任单一,所以模块化是很有必要的。
![0057dfff3bf4b53db35f3aa99cc662e2.png](https://i-blog.csdnimg.cn/blog_migrate/47963894d2228ba3a175c2048634d29d.jpeg)
项目结构
1:在src下新建目录store,然后再建storemodule.js文件,把 上篇 store.js文件抽出来:
import Vue from 'vue'import Vuex from 'vuex'import countsub from './countsub' //.js 或者.vue可以省略,其他文件不可以。Vue.use(Vuex)export default new Vuex.Store({modules:{ countsub,}})
2:在store目录下再建countsub.js文件,抽离上篇store.js文件中vuex的四部分内容,然后在storemodule.js文件中注册:
export default{ state:{ count:0 }, getters:{ addcountgetters(state){ return state.count + 4; } }, mutations:{//相当于methods,定义一些方法(同步)。方法里有个默认参数--state addcount(state){ state.count++; }, subcount(state){ state.count--; } }, actions:{//异步操作(也可以定义同步方法)。提交mutation,而不是直接变更状态。 addcountasync(context){ setTimeout(()=>{ context.commit('addcount'); },1000);//延迟一秒。 } }}
3:修改main.js中的注册文件:
![1dc39057162f4c006490f8b4c68b3a99.png](https://i-blog.csdnimg.cn/blog_migrate/8765c3b158771d4a14831529badbc9e7.jpeg)
4:修改store.vue中computed的属性内容。如果是用字符串的必须改成用箭头函数,并且state后面必须加新的模块名称(countsub)。
即state.countsub.count
Vuex:{{showcount}}
计算属性:{{showstatevalue}}
vuex中的计算属性:getters:{{addcountgetters}}