VueX优化

1.#mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

//首先导入mapGetters
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

2.在组件中分发 Action
你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

state
export default {
  isFullScreen: false
}
mutations
export default {
  changeFullScreen (state, flag) {
      state.isFullScreen = flag
    }
}

export default new Vuex.Store({
  // state:用于保存全局共享的数据
  state: state,
  mutations: mutations,
  actions: actions,
  getters: getters

  /*
  很多代码放在一起会导致不容易后期维护
  state: {
    isFullScreen: false
  },
  // mutations:用于保存修改全局共享的数据的方法
  mutations: {
    changeFullScreen (state, flag) {
      state.isFullScreen = flag
    }
  },
  // actions 用于保存触发mutations中保存的方法的方法
  actions: {
    setFullScreen ({ commit }, flag) {
      commit('changeFullScreen', flag)
    }
  },
  getters: {
    isFullScreen (state) {
      return state.isFullScreen
    }
  }
  */
})

4.actions里的字符串修改为常量
创建一个mutations-type

export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'

mutations.js

import { SET_FULL_SCREEN } from './mutations-type'
export default {
  /*
  changeFullScreen (state, flag) {
    state.isFullScreen = flag
  }
  */
  //想让常量作为方法名称 要加[]
  [SET_FULL_SCREEN] (state, flag) {
    state.isFullScreen = flag
  }
}

actions:

import { SET_FULL_SCREEN } from './mutations-type'
export default {
  /*
  setFullScreen ({ commit }, flag) {
    commit('changeFullScreen', flag)
  }
  */
  setFullScreen ({ commit }, flag) {
    commit(SET_FULL_SCREEN, flag)
  }
}