第十六节：Vuex4.x 简介及state、getters、mutations、actions详解(OptionApi 和 CompositionApi)

一. Vuex简介

1. 简介

　(官网地址：https://next.vuex.vuejs.org/zh/index.html     在Vue2中使用的详见：https://www.cnblogs.com/yaopengfei/p/14571316.html        本节采用的版本号【4.0.2】)

　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

　如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的store模式(或者父子组件传值、缓存等)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

2. 核心总结

　在Vuex中，有五大核心模块，分别是state、getters、mutations、actions、module，下图是每个模块的作用，已经在OptionApi 和 Composition Api中对应的 $store 、辅助函数的两种写法。

3. 快速入门 

(1). 在store文件夹中创建index.js文件

import { createStore } from 'vuex'
// 导入相关常量
import { ADD_N } from './mutation-type'

export default createStore({
    state() {
        return {
            counter1: 100,
            name: 'ypf',
            age: 18,
            height: '1.82m'
        }
    },
    getters: {
        // 第一个参数是固定参数state， 用来获取上面state中的对象，
        ageInfo(state) {
            return `我的年龄是${state.age}`;
        },
        //可以返回一个函数，来实现传参 
        // 外界传过来的值这里用msg接收，这里的getters主要是用来获取其它getter属性的
        nameInfo(state, getters) {
            return function(msg) {
                return `我的名字是${state.name},${msg},${getters.ageInfo}`;
            }
        },
    },
    mutations: {
        increment(state) {
            state.counter1++;
        },
        decrement(state) {
            state.counter1--
        },
        /* 
         参数说明：
         state:用来获取上面state中的数据
         payLoad：用于接收外界传递过来的数据
         */
        // payLoad可以是int类型，表示递增数
        incrementN(state, payLoad) {
            state.counter1 += payLoad;
        },
        // payLoad可以是对象，比如 {myStep：20，name：'ypf'}
        decrementN(state, payLoad) {
            state.counter1 -= payLoad.myStep;
        },
        // payLoad可以是int类型，表示递增数
        [ADD_N](state, payLoad) {
            state.counter1 += payLoad;
        }
    },
    actions: {
        /* 
        两个参数：
        (1). context:是一个和$store实例均有相同方法和属性的对象,可以从其中获取到commit方法来提交一个mutation，
               或者通过 context.state 和 context.getters 来获取 state 和 getters
               可以解构为：{ commit, dispatch, state, rootState, getters, rootGetters }
        (2). payLoad:外界传递过来的数据，可以是各种类型
         */
        incrementAction(context, payLoad) {
            setTimeout(() => {
                context.commit('increment');
            }, 1000);
        },
        // payLoad可以是一个对象  {myStep:20，myStep2:30}
        decrementNAction({ commit, dispatch, state, rootState, getters, rootGetters }, payLoad) {
            if (payLoad.myStep) {
                commit('decrementN', payLoad);
            } else {
                commit('decrement');
            }
        },
        // 通过promise实现捕获异常的结束
        testAdd(context) {
            return new Promise((resolve, reject) => {
                try {
                    context.commit('increment');
                    resolve('执行结束啦')
                } catch (e) {
                    reject('出错了')
                }
            });
        }


    },
    modules: {}
})

View Code