vue vuex状态管理 模块化

项目目录结构示例

每个模块为一个js，方便后期维护

• store/modules/CesiumCharts.js

// --store/modules/CesiumCharts.js
export default{
    namespaced:true,
    actions:{},
    mutations:{},
    state:{},
    getters:{}
}

• store/index.js

// -- store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
import CesiumCharts from './modules/CesiumCharts'
import ModelInfo from "./modules/ModelInfo"
​
Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        CesiumCharts, ModelInfo
    }
})

块化访问state的方式

• 方式一：

  // this.$store.state.模块名.全局数据的名称
  this.$store.state.CesiumCharts.count
  ​
  // 使用
  <p>{{$store.state.CesiumCharts.count}}</p>
  

• 方式二：

  // 1.从vuex中按需导入 mapState函数
  import { mapState } from 'vuex'
  // 2.将全局数据，映射为当前组件的计算属性
  // 导入mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
  ...mapState('模块名', ['全局数据的名称'])
  ​
  // 示例
  export default{
      computed: {
          ...mapState('CesiumCharts', ['count'])
      } 
  }
  ​
  // 使用
  <p>{{ count }}</p>
  

模块化中的mutation

触发mutation的方式：

• 方式一：

  // --store/modules/CesiumCharts.js
  mutations: {
      ADD(state) {
        state.count++
      },
      // 如果需要接收传递的参数
      ADDN(state, value){
          state.count += value
      }
  }
  // 使用mutations的组件
  methods: {
      add() {
        // this.$store.commit('模块名/方法名')
        // commit的作用：调用某个mutation函数
        this.$store.commit('CesiumCharts/ADD')
        // commit 第二个参数：需要传递的参数
        this.$store.commit('CesiumCharts/ADDN', 3)
      }
  }
  

• 方式二

  // 1.从vuex中按需导入mapMutations函数
  import { mapState, mapMutations } from 'vuex'
  // 2.将指定的mutations函数，映射为当前组件的methods函数
  // 通过导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法
  methods:{
      ...mapMutations('CesiumCharts', ['ADD', 'ADDN']),
     add(){
          // 括号内为传递的参数
          this.ADDN(3)
      } 
  }
  

模块化中的action

• 方式一：

   this.$store.dispatch('模块名/方法名', 参数)
  

• 方式二：

  import { mapActions } from 'vuex'
  methods:{
      ...mapActions('CesiumCharts', ['addAsync']),
      handle() {
        this.addAsync(8)
      }   
  }
  

模块化中的getters

访问getters的方式：

• 方式一：

   // this.$store.getters['模块名/方法名']
  <p>getters:--{{ $store.getters['CesiumCharts/showNum'] }}</p>
  

• 方式二：

  import { mapGetters } from 'vuex'
  computed:{
      ...mapGetters('CesiumCharts', ['showNum'])
  }
  <p>{{ showNum }}</p>