vuex 模块
2024-10-17 01:04:00
今天，在我编写系统中一个模块功能的时候，由于我使用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: {}
}
最新文章
- bzoj 1711 [Usaco2007 Open]Dining吃饭&&poj 3281 Dining
- android 自定义Style初探－－－ProgressBar
- webconfig中注册HttpHandler报错：检测到在集成的托管管道模式下不适用的 ASP.NET 设置。
- Python 输入输出
- SQL 数据类型，增删改查语句
- 使用avalon 实现一个订座系统
- SAX EntityResolver 的作用
- C语言复合梯形公式实现定积分
- 记Angular与Django REST框架的一次合作（2）：前端组件化——Angular
- Spring知识点回顾（06）Profile 和 条件注解 @Conditional
- Linux集群时间同步方法
- Shell：常用+好用命令
- POJ 2248 - Addition Chains - [迭代加深DFS]
- Jmeter（四）NO-GUI模式运行
- script 加载顺序问题的延展研究
- php 函数2
- Java Swing：JPanel添加边框
- C++ 继承、函数重载
- Qt flash_eraseall nandwrite 进度条显示擦除、烧录
- csu 1806 & csu 1742 (simpson公式+最短路)