今天给我们详细地讲了vuex,他有五个核心属性,state,action,mutation,getters,modules,
state 仓库
在组件中调用this.$store.state.属性来获取state里面的数据,通过今天的一个讲解,也知道了另一种方法,可以通过
辅助函数来调用
...mapstate(['属性名'])
action异步操作方法也有两种方法
可以通过this.$store.dispath('要调用的属性名')来实现
...mapAction(['属性名'])辅助函数
mutations
this.$store.commit('属性名')
getters
this.$store.getters('属性名')
...mapgetters(['属性名'])辅助函数
modules模块化,在管理数据非常多时,会造成state臃肿,所以我们可以讲state分成每个小块,每个小块都有state,action,mutation,getters,modules
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
调用this.$store.state.a
后来也讲了vuex的数据持久化,结合本地存储来使用 或者也可以安装一个插件,可以自动添加到本地存储中
第一步:安装:
npm install --save vuex-persistedstate
第二步:在vuex中的index.js引入
import createPersistedState from "vuex-persistedstate";
第三步:在vuex实例上通过plugins注入
export default new Vuex.Store({
...
plugins: [createPersistedState()]
})
包括最后的一个js文件自动导入的方法
/读取./modules/目录下的所有js文件
const moduleFiles = require.context('./modules/', true, /\.js$/);
const modules = moduleFiles.keys().reduce((module, modulePath) => {
const moduleName = modulePath.replace(/\.\/(.+)\.\w+/, '$1')
const value = moduleFiles(modulePath).default
module[moduleName] = value;
return module;
}, {})