vuex的计算属性_vuex 模块化必要性，及其怎样模块化

大项目中为了方便管理，责任单一，所以模块化是很有必要的。

项目结构

---

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中的注册文件：

---

4：修改store.vue中computed的属性内容。如果是用字符串的必须改成用箭头函数，并且state后面必须加新的模块名称(countsub)。

即state.countsub.count

Vuex:{{showcount}}

计算属性:{{showstatevalue}}

vuex中的计算属性：getters:{{addcountgetters}}