07.Vuex共享数据.jpg

模块化管理

store/index.js

import vue from 'vue'
import vuex from 'vuex'
import mod1 from './mod1.js'
import mod2 from './mod2.js'
vue.use(vuex);
export default new vuex.Store({
  modules:{
    mod1:mod1,
    mod2:mod1
  }
});

store/mod1.js

export default {
  state:{ 
    curWeek: lanzyUtilsJs.getCurWeek()
  },
  getters:{
    getObjByYmd (state, getters) {
      return ymd => {
        return state.schedules.filter(s => s.ymd === ymd)
      }
  },
  mutations:{ // 修改state属性值推荐使用mutations方法
    preNextDay (state, curDate) {
      state.curDate = curDate
    }
  },
  actions:{ // 异步操作必须使用action方法,比如axios操作
    aUpdateInfo(context, param){
      return new Promise((resolve, reject) => {
        setTimeout(() => {
        context.commit('mutationsMethod');
        resolve('返回值');
      }, 1000)
    }
  }
}

main.js

import store from './store'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views/xxx.vue

this.$store.mod1.state.StateName
this.$store.mod1.getters.GetterName(param)
this.$store.mod1.commit('mutation name', param);
this.$store.mod1.disaptch('action name', param);