Vuex（状态管理模式）

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

Vuex是状态管理器，作用是在vue项目中管理数据。
组件的通讯是很复杂的，方便进行组件通讯。
优点：数据的更新是响应式的。

使用vuex     
安装：yarn add vuex@3.6.2

创建配置store :      src/store/index/js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({ 配置项/核心概念})
export default store

挂载实例：main.js中

import store from '@/store'
new Vue({  store ,   .......   })
使用方式：
1.  直接调用  $store.state.num
2.  引入辅助函数mapState             
import {mapState} from 'vuex'

computed: {
        // 将state里面的属性映射为当前组件的计算属性     解构赋值
        ...mapState(['num']),
    },

如何修改仓库里的数据：
唯一能修改数据的地方：
mutations: {
        changeNum(state, data) {
       //  形参1  ：上面仓库的state的数据对象
       //  形参2  ：可选参数，接收外部传入的数据
            state.num += data
        },
    },
触发 mutations修改state数据的方式1： $store.commit('fn' , data)

触发 mutations修改state数据的方式2：
methods: {
        // 将 mutations 里面的方法映射为当前组件的方法
        ...mapMutations(['changeNum']),
    },

//actions 异步修改数据
    actions: {
        changeNumAsync(context,data) {
            //  形参1  ：  上下文对象    context里面有commit和dispatch可以直接调用
            //  形参2  ：  可选参数，接收外部传入的数据
            setTimeout(() => {
                context.commit('changeNum', data)
            },2000)
        }
    }
//简历快捷访问的方式
    getters: {
        userName(state) {
            //  形参1  ：  上面仓库的state的数据对象
            return state.userinfo.username
        },
        Age: (state) => state.userinfo.detail.age,
        Gender: (state) => state.userinfo.detail.gender,
        
    },

注意事项：　

　　基本组成：

　　　　注意到这个store对象包含三个子对象：

　　　　　　state、mutations、actions

　　　　其中state用于存储数据，类似vue实例的data属性。

　　　　mutations用于递交更改，对state对象中的属性数据进行更改。

　　　　actions用于进行递交异步更改，通过调用mutations实现对数据的更改。

　　actions与mutations的区别：

　　　　其中actions区别于mutations的地方在于mutations只能进行同步更改，而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性

　　　　函数执行，而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。

　　定义actions与mutations属性函数的注意事项：

　　　　其中定义mutations属性函数时必须传递的第一个参数是state，因为要对state进行更改，第二个参数代表传入的新参数。mutations属性函数只接受两个参数，如果要同时更

　　　　改多个属性值，可以通过对象传入。

 　　　　在actions属性函数中可以通过context.commit()方法触发mutations属性函数。定义actions属性函数时，必须传递的第一个参数是context，用于触发mutations函数。

　　触发actions与mutations属性函数的方法：

　　　　在子组件中通过this.$store.commit()方法触发mutations属性函数。在注册store的Vue实例中（第三步中将会讲到）可以通过store.commit()触发。

　　　　commit函数第一个参数是mutations的属性函数名，第二个参数是传入的新值。

　　　　actions属性函数中可以进行异步操作，比如通过ajax或者Vue.Resource()进行数据获取，获取数据后再通过context.commit()触发更改。

 　　　　触发actions属性函数使用this.$store.dispatch()或者store.dispatch() （在注册store的Vue实例中）函数。dispatch函数传递的一个参数是actions属性函数名称。如果希望在

　　　　Vue实例创建完成还未挂载时就从后端获取数据，则可以在created钩子函数中调用actions属性函数。

　　在组件中访问数据中心state的注意事项：

　　　　在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后，组件会自动更新，则应该使用组件的computed属性定义数据，而

　　　　不是通过data属性定义。如果使用data定义组件数据，则state中的数据发生更改之后组件不会发生变化。