2020/5/21工作日报

104 阅读1分钟

今天给我们详细地讲了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;
}, {})