今天,在我编写系统中一个模块功能的时候,由于我使用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: {} }