- 在vuex中,所有的代码都放在了index.js文件中,这使得index.js文件过于复杂,不方便查找与修改,为了更好的管理项目,使用以下方法来进行简化
- 在store文件夹中创建mutations.js、actions.js、getters.js分别用来存放mutations属性、actions属性与getters属性
- 对于modules属性,创建modules文件夹,在modules文件夹中存放创建的modules属性
- 在index.js文件中导入以上文件实现vuex项目
mutations.js
export default {
// 方法
updateInfo(state) {
state.info.name = 'admin';
}
}
actions.js
export default {
actUpdateInfo(context, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit('updateInfo');
}, 1000);
console.log(payload);
resolve('使用Promise进行actions操作');
});
}
}
getters.js
export default {
stu() {
return {
name: 'Lily',
age: 20,
gender: '女',
grade: 1204
}
}
}
moduleA.js
export default {
state: {
name: 'testData'
},
mutations: {
updateName(state, payload) {
state.name = payload;
}
},
actions: {
actUpdateName(context) {
console.log(context.rootState);
console.log(context.rootGetters);
setTimeout(() => {
context.commit('updateName', 'Name');
}, 1000);
}
},
getters: {
fullName(state) {
return state.name + '0000';
},
fullName2(state, getters) {
return getters.fullName + '1111';
},
fullName3(state, getters, rootState) {
return getters.fullName2 + rootState.message;
}
}
}
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from "./mutations";
import actions from "./actions";
import getters from "./getters";
import moduleA from "./modules/moduleA";
// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
state: {
info: {
name: 'abc',
age: 20,
height: 1.80,
num: 1101
},
message: 'someMessage'
},
mutations,
actions,
getters,
modules: {
a: moduleA
}
})
// 3.导出store
export default store
store文件夹目录结构