vue-cli 2.x项目模板文件说明（五）状态管理篇

本文是vue/cli2.x脚手架下src目录下store篇，完整项目结构参照vue-cli 2.x项目模板文件说明（一）整体结构篇

4.store目录

(1)module
状态管理的模板页，如果状态管理本身比较复杂的话，可将每个组件的状态单独建立一个模板，然后由同目录下store.js统一导出，方便维护
示例文件

const state = {
  limit: 30
}

const mutations = {
  changeLimit(state, n){
      state.limit = n
    }
}
const getter = {

}
const commit = {
}
export default {
  state,
  mutations,
  getter,
  commit
}

(2) store.js

import Vue from 'vue'
import vuex from 'vuex'
import global from '@/store/modules/global.js'

Vue.use(vuex)

export default new vuex.Store({
  modules: {
    global
  }
})

(3) 使用时 *.vue中

<script>
  export default {
    data () {
       return {
          limit: this.$store.state.global.limit
       }
    }
  }
</script>

注：分模块调用时，除state采用分模块写法，其他均采用正常写法，如在*.vue中

<script>
  export default{
    methods: {
      setLimit (n) {
        this.$store.commit('changeLimit', n)
      }
    }
  }
</script>

此处this.$store.commit(‘changeLimit’, n)写法中，'changeLimit’与global.js中导出规则有关，比如在vuex官网中

const moduleA = {
  state: { ... },
  mutations: { 
    changeLimit(state, n){
      state.limit = n
    }
   },
  actions: { ... }
}

调用时为 this.$store.commit(‘moduleA/changeLimit’, n)