Vuex

https://segmentfault.com/a/1190000018229333
https://www.jianshu.com/p/3e7fb0c6cbe2

一、Vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简而言之，就是把项目中需要全局使用的变量集中地存储到一个地方store，所有的组件都可以去使用或者修改这些变量

二、核心概念

State: 存储全局变量的仓库

Getter: 获取state中数据的方式

Mutation: 更新state操作

Action: Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

Module: 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）

三、使用Vuex

项目使用vuex:
vue add vuex
npm install vuex -s

创建store文件夹,创建index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import person from './module/person'
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        employee: {
            username: 'fzy',
            password: '123456'
        }
    },
    mutations: {
        CHANGE_USER: (state, payload) => {
            state.employee.username = payload.username;
            state.employee.password = payload.password;
        }
    },
    getters: {
        employee: (state) => state.employee
    },
    actions: {
        changeUserAction: (context, payload) => context.commit('CHANGE_USER', payload)
    }
    ,
    modules: {
        person: person
    }
})

四、mapState、mapGetters、mapMutations、mapActions

• mapState: 获取store里的变量

computed: {
        ...mapState(['employee']),
    }

• mapGetters: 获取store里的数据，与mapState不同的是，mapState只能直接获取store里的数据，而mapGetters可以在getters里对数据做一些处理

computed: {
        ...mapGetters(['employee']),
    }

• mapMutations: 获取Mutation, 当做函数使用

methods: {
    ...mapMutations (['CHANGE_USER'])    //字符串形式
    ...mapMutations ({changeUser:  'CHANGE_USER'})    //映射方式
}

调用：

CHANGE_USER(payload);
changeUser(payload);

• mapActions: 获取定义的action, 当做函数使用

methods: {
    ...mapActions (['scoreAction'])
    ...mapActions ({add:  'scoreAction'})
}

调用：

scoreAction(100);
add(100);

五、持久化

https://www.jianshu.com/p/2b5791ae3636