Vuex状态管理模式

    科技2022-09-13  127

    Vuex

    官方文档

    vuex实现共享状态管理,实际就是管理里面的state的相应值

    import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //这里放全局参数 }, mutations: { //这里是set方法 }, getters: { //这里是get方法 }, actions: { }, modules: { //这里是我自己理解的是为了给全局变量分组,所以需要写提前声明其他store文件,然后引入这里 } }) state: 相当于组件中的data,专门用来存放全局的数据getters: 相当于组件中的computed,但是getters是全局的,computed是组件内部使用上的mutations: 相当于组件中的methods,但是它不能使用异步方法(定时器,axios)action: 专门用来处理异步,实际修改状态值依然是mutationsmodules: 模块化,给全局变量分组,所以需要写提前声明其他store文件,然后引入这里

    Tips:

    数据较多可以使用拆分写法

    模块较多可以使用命名空间

    mutations_type,将方法统一到对象中便于管理

    map* 辅助函数 可以使代码更简洁 注意:

    store 中存储的状态是响应式的,当组件从store中读取状态时,如果store中的状态发生了改变,那么相应的组件也会得到更新;

    不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

    应遵循的规则:

    应用层级的状态都应该集中在store中

    提交 mutation 是更改状态state的唯一方式,并且这个过程是同步的。

    异步的操作应该都放在action里面

    详见:https://blog.csdn.net/yusirxiaer/article/details/99634868

    Processed: 0.008, SQL: 9