vue-x

1.vuex的优点：

    不同组件数据保持同步

    数据的修改都可追踪

2.vuex存储

    多个组件共享状态，才存储在vuex中

    某个组件中的私有数据，存储在该组件的data中

3.vuex官网地址：https://vuex.vuejs.org/zh/

    在vue项目中引入：npm i vuex

    vuex固定配置：

4.创建store仓库

    建议在src下创建一个新的文件夹，在其中的index.js中进行创建。代码如下：

    在main.js中引入该文件，并引入到Vue中，路径中index.js是默认寻找的，可省略

5.vuex-state数据源

    定义：

    使用：方式1————this.$store.state.变量名

                方式2————映射使用

        首先，引入vuex中的mapState，在计算属性computed中展开，然后即可当作data中的值一样使用。

6.vuex-mutations同步修改

    mutations是唯一能修改state的地方, 确保调试工具可以追踪变化

    mutations函数内, 只能写同步代码, 调试工具可追踪变化过程

    因为调试工具要立刻产生一次记录, 所以必须是同步的

    创建：

    使用：mutations的使用也分为两种方式

                方式1：this.$store.commit("方法名",参数)

                方式2：映射方式代码如下

首先个button按钮一个点击事件，点击时触发myFn方法

引入mapMutations,此为vuex中固定，不可修改

在方法中进行解构，然后在点击时，触发myFn方法后进行调用

7. vuex-actions 异步修改

    创建：

    注意：此处调用mutation中的方法去修改值，通过store.commit（方法名，参数）

        使用：1.this.$store.dispatch("异步方法名", 参数);

                    2.映射方式代码如下，大致与mutation相同：

创建一个按钮，给click事件添加方法

引入mapActions

在methods中解构，在事件触发时调用

8.vuex-getters

    vuex身上的全局状态-计算属性, 类似于computed

    getters 依赖于 state中原始数据的变化，并返回计算后的新数据

    定义：

需return值给计算属性

    使用（与state的使用方式大致相同）：

            1.this.$store.getters.计算属性名

            2.映射方法：

引入mapGetters

在computed中解构，结构后与data的使用方法相同