1.2 Vuex详解

官方：Vuex是一个专为Vue.js应用程序开发的状态管理模式

• 它采用 集中式存储 管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• Vue的官方调试工具 devtools extension 也包含了Vuex，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试。

1.2.1 集中式存储管理

• 我们可以用Vue.prototype.属性来模拟这种集中式存储管理的原理。
• 当我们在Vue.protype上创建属性后，我们就可以在任何一个Vue实例里用this.属性来访问。
• 只不过Vuex官方还实现了响应式，所以我们就不需要重复造轮子了。

1.2.2 单界面的状态管理

... -> View -> Actions -> State -> View -> Actions ->...

三者循环

Vuex的创建

import Vuex form ‘vuex‘;
import Vue from ‘vue‘;
// 1.安装插件
Vue.use(Vuex);
// 2.创建实例
const store = new Vuex.Store({
    state:{
        // 记录状态（变量），组件通过$store.state.counter获取
        counter： 10000,
        students: [
        	{id: 1001, name: ‘杨振泽‘, age: 18},
            {id: 1001, name: ‘欧豪‘, age: 30},
            {id: 1001, name: ‘五亿探长‘, age: 10},
            {id: 1001, name: ‘无敌‘, age: 21},
        ]
    },
    mutations:{
        // 方法 通过this.$store.commit(‘increment‘)代码调用此方法
        increment(state){
            state.counter++;
        },
        decrement(state){
            state.counter--;
        },
        // 用户自定义参数  通过 this.$store.commit(‘incrementCount‘, count); 
        // 这里的自定义参数被称为 payload ( 载荷 )
        incrementCount(state, count){
            state.counter += count;
        },
        updateStudent(state, stu){
            state.push(stu);
        }
    },
    actions:{
        // 异步操作 通过this.$store.dispatch(‘updateStudent‘,stu);
        updateStudent(context,stu){
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    context.commit(‘updateStudent‘,stu);
                    resolve(‘success‘);
                });
            });
        }
    },
    getters:{
        // 属性 通过$store.getters.powerCounter获取结果
        powerCounter(state){
            return state.counter * state.counter;
        },
        // 全局使用此计算属性。
        more_20_student(state){
            return state.students.filter(s => s.age>20);
        },
        more_20_student_length(state, getters){
            return getters.more_20_student.length;
        },
        // 使用者自定义参数
        moreAgeStudent(state){
            // return function (age) {
            //    return state.students.filter(s => s.age > age);
            // }
            return age => {
                return state.students.filter(s => s.age > age);
            }
        }
    },
    modules:{
        a:{
            state:{},
            mutations:{},
            actions:{},
            getters:{}
        },
        b:{
            state:{},
            mutations:{},
            actions:{},
            getters:{}
        }
    }
});
// 3.导出store对象
export default store;

backend/frontend 后端/前端

devtools

chrome网上商店 谷歌访问助手 ‘switch / 切换‘

? ！避免直接修改state

通过mutations的方法来操作state，Vuex可以更明确追踪状态的变化，还可以被devtools记录，方便调试。

1.2.3 Vuex核心概念

state单一状态树

Single Source of Truth 单一数据源

！只有一个store

Getters

与计算属性相似，是属性的get方法表现。

Mutation

Vuex的store状态更新的唯一方式：提交Mutation

同步函数，保证devtools捕捉快照的正确性。！不允许在mutation内使用异步代码

Mutation主要包含两部分：

• 字符串的事件类型

  this.$store.commit( ‘increment‘ )  // 触发事件
  

• 一个回调函数，函数的第一个参数为state

提交风格：

// 可以利用常量来定义mutation的方法名，减少代码的书写错误，常见于大型项目中。
export const INCREMENT = ‘increment‘;

import {
    INCREMENT
} from ‘./...‘
// 调用方
this.$store.commit({
    type: INCREMENT,
    count: 10,
    age:18
})

mutations:{
    [INCREMENT](state, payload){
        console.log(payload);
        /*
            {
                type: ‘increment‘,
                count: 10,
                age: 18
            }
        */
    }
}

Mutation的响应规则：

（观察者模式 dep=>[watcher,watcher]）

！能被响应的属性，必须是提前在store.state中初始化好的属性（响应式系统中有记录）。

// 但有时我们确实想在代码运行中，将某个属性更新到Vue的响应式系统中，可以通过如下方法：
Vue.set(obj, key, value);
Vue.update(obj, key);
// 删除属性
delete state.info.age; // 做不到响应式
Vue.delete(state.info, ‘age‘); // 响应式

解决专业问题，尽量使用谷歌查询。

Action异步操作

类似mutation，但用来进行异步操作。

Modules模块化

const module_01 = {
    state:{
        // 通过 $store.state.module_01.name 获取 --较为特殊
        name:‘索隆‘
    },
    mutations:{
        // 通过 this.$store.commit(‘updateData‘,‘佐伊‘);
        updateData(state,payload){
            state.name = payload;
        }
    },
    actions:{
        // 此处的 context 只能操作自己模块mutations里面的方法。
        // this.$store.dispatch(‘asyncUpdateData‘)
        asyncUpdateName(context){
            setTimeout(()=>{
                context.commit(‘updateData‘,‘薇恩‘);
            });
        }
    },
    getters:{
        // 通过 this.$store.getters.fullname 获取
        fullname(state){
            return state.name + ‘凯撒‘
        },
        fullname_02(state,getters){
            return getters.fullname + ‘加图索‘;
        },
        fullname_03(state, getters, rootstate){
            return getters.fullname_02 + rootstate.counter;
        }
    }
}

const module_02 = {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

const store = new Vuex.Store({
    state:{
        counter: ‘100‘
    }
    mudoles:{
        modules_01,
        modules_02
    }
});

Vuex

原文：https://www.cnblogs.com/yangzhenze/p/12740725.html