vuex 模塊

今天，在我編寫系統中一個模塊功能的時候，因爲我使用vuex存儲數據的狀態，並分模塊存儲。我是這樣在存儲文件中定義state,getters,actions,mutations的，我打算在不一樣模塊文件都使用相同的方法名稱，而後在頁面中帶上模塊名進行訪問：

import * as types from '../mutation-types'

  const state = {    
  }
  const getters = {    
  }
  const actions = {
    /**
     * 得到一頁數據
     */
    page(context) {     
    },
    /**
     * 得到一項信息
     */
    get(context) {
    },
    /**
     * 新增數據
     */
    create(context) {
    },
    /**
     * 更新數據
     */
    update(context) {
    },
    /**
     * 刪除數據
     */
    delete(context) {
    }
  }
  const mutations = {   
  }

export default {
  state,
  getters,
  actions,
  mutations
}

導出爲模塊：

import country from "./modules/countryStore"

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    country
  },
  //strict: debug,
  strict: false,  //不啓用嚴格模式
})

而後我發現，在使用模塊屬性時，在頁面裏只能使用state裏定義的屬性，其餘都不能得到

import { mapState,mapGetters, mapActions } from 'vuex'

  export default{
    computed:mapState({
        tableData: state => state.country.countryDataSet
     }),

    //不能得到  
    //mapGetters({
    //    tableData: (getters) => getters.country.countryDataSet
    //}),

    created(){
        this.$store.actions.country.page //.dispatch("country.page")
        //this.$store.dispatch("country.page")  //未找到
    },

這兩種方法this.$store.dispatch("page")、this.$store.getters.countryDataSet（缺點是每一個方法名都得是惟一的） 都是能夠訪問的，可是在一個大規範的應用中，應該存在不一樣模塊中存在同名的方法，如：數據更新都使用update方法名，根據模塊進行區分調用。這樣開發起來也簡單，代碼也好理解。可是目前尚未找到使用模塊來訪問store中定義的方法的方法。

 

2017年1月9日更新：

實驗過多種方式以後，下面這種方式能夠在使用時加上方法前綴。

//countryStore.js
export default {
    state:{
    },
    getters:{
    },
    actions:{ 
       /*//錯誤，無法使用命名空間
       getPage(context) {
       }  */
      
       //正確，在vue文件中能夠使用 this.$store.dispatch("country/getPage") 便可
       ["country/getPage"](context) { }
    },
    mutations: {}
}