Vuex状态管理：Mutations :VOA模式

Vuex简介

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

简单来说，组件直接需要通信，我们传统的用(provide,inject),(props,$emit),（发布订阅）来做

但是如果项目小的话也挺不错的，但是如果涉及的项目太大，成百上千的组件通信需要维护，这样就可以引入Vuex进行状态的集中管理。

1. 页面中存在多个需要共享的状态，引入Vuex，便于维护
2. 缓存部分异步数据，减少后端服务器的请求，增加用户体验

Vuex安装

npm install vuex@next --save

#或者

yarn add vuex@next --save

Mutation简介

vuex的mutations与actions有什么区别，除了用法上mutation是同步，actions是异步，这里的同步与异步指的是commitordispatch?并不是，同步指mutations方的内部是同步的，而actions内部可以是异步的，并且修改数据只能在mutations中修改，在actions中异步的操作副作用是通过mutations来记录

我们修改数据就是$store.commit('eventName', parameters),当我们触发commit时，实际上是已经在异步请求回调里获取了数据。
但是官方在描述mutation有这么说，mutation内部必须是同步函数，异步会导致内部状态难以追踪，devtool难以追踪state的状态

也就是说当我们在mutations中的appIsShow中使用了异步函数，我们在$store.commit('appIsShow')时，很难追踪state的状态，因为在触发commit事件时，异步的回调函数不知道什么时候执行，所以难以追踪。
mutations是同步事务，假设在mutations有多个异步的调用，你很难确定这些异步哪些先执行，很难追踪state的变化，所以也给调试带来了一定难度

话说回来，这么写也确实是可以做到更新state的值,如果我不用vuetool这个工具，貌似也没毛病
既然mutations是同步的事情，那么异步官方就使用了actions方案

actions里面可以做异步操作，但是并不是直接修改数据，提交的是mutations里面的方法

Mutations使用案列

在项目src文件夹下创建一个store文件夹，在store文件夹下创建一个index.js文件

/src/store/index.js状态管理器

// 什么时候需要用到Vuex,及它的能力

// 1、页面中有多个需要共享的状态，引入vuex，便于维护（父子通信，非父子通信）
// 2、缓存部分异步请求的数据，减少后端服务器的请求访问，增加用户体验

import { createStore } from 'vuex'

const store = createStore({
    state() {
        return {
            appIsShow: true,
            datalist:[],
        }
    },

    //Vuex中的Mutation是用来做数据状态监控的，我们要修改state()中的数据，就需用commit方法来向Mutation提交数据，在Mutation中对数据进行修改，这样Mutation就能将数据的修改过程记录下来，方便我们后续调试。这样我们就可以通过Mutation来回放这个数据每次变更的过程。
    //举列：当我们要修改state()中的appIsShow这个数据，那么我们可以在mutations中定义一个事件changeAppIsShow，这个事件绑定了一个匿名回调函数，在这个回调函数中对appIsShow来进行修改，这样Mutation就能将数据的修改过程记录下来，方便我们后续调试。这样我们就可以通过Mutation来回放这个数据每次变更的过程。
    //当用户在组件中想修改这个state()中的appIsShow这个数据了，就可以通过this.$store.commit("changeAppIsShow", true)的方式来触发changeAppIsShow事件绑定的回调函数，实现appIsShow数据的修改。
    //注意：Mutation内部必须是同步函数，异步会导致内部状态难以追踪
    mutations: {
        //state参数:是state()中return中的对象，它是vuex自动给我们注入进来的。我们调用的时候不需要传递这个参数，直接传递第二个参数boolParams即可：如：this.$store.commit("changeAppIsShow", false);这个false就是我们的传参
        //params可选参数：用户传递的参数,这个参数具体传递的是int，bool，string,obj，由用户决定。这里我们根据我自己的业务需要一个bool值
        changeAppIsShow: (state, boolParams) => {
            state.appIsShow = boolParams;
        }

        //可以简写成如下方法：
        // changeAppIsShow(state, boolParams) {
        //     state.appIsShow = boolParams;
        // }
    }
});

export default store

main.js 注册状态管理器

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//import store from "../src/store" //状态管理器js          注意：如果仅仅是指定了一个文件夹router，程序会自动去router文件夹下寻找index.js，并导入
//import store from "../src/store/index" //导入状态管理器js    注意：.js可以省略
//import store from "../src/store/myindex.js" //导入状态管理器js  注意：如果我们的状态管理器文件不是index.js 那么我们就得指定具体的名称了

import store from "../src/store/index.js" //导入状态管理器js 


var app=createApp(App)

app.use(store)  //注册vuex插件：状态管理器

app.mount("#app")

组件中使用：案列1

<template>
    <div>Home
    </div>
</template>
<script>
export default {
    beforeMount() {
        //向Mutation提交数据，并指定触发一个名称为changeAppIsShow的事件,同时为这个事件绑定的回调函数传递了一个值为false的参数
        this.$store.commit("changeAppIsShow", false);
    },

    beforeUnmount() {
        //向Mutation提交数据，并指定触发一个名称为changeAppIsShow的事件,同时为这个事件绑定的回调函数传递了一个值为true的参数
        this.$store.commit("changeAppIsShow", true); 
    }
}
</script>

组件中使用：案列2

在项目src文件夹下创建的store文件夹下再创建一个type.js文件，用来集中管理变量的名称

优点：

当我们要避免命名冲突，需要对修改某个命名进行修改来避免命名冲突，采用常量的方式可以省略很多麻烦，避免多次操作：

案列：

type.js文件

//App页面状态常量
const CHANGE_APPISSHOW = "changeAppIsShow"



//Home页面状态常量



//List页面状态常量



export { CHANGE_APPISSHOW }

index.js状态管理器

注意如果函数名称需要用到常量，需要用[  ]括起来

import { CHANGE_APPISSHOW } from './type.js'
import { createStore } from 'vuex'

const store = createStore({
    state() {
        return {
            appIsShow: true,
            datalist: [],
        }
    },

    mutations: {
        //注意：如果函数名称需要用到常量需用[ ]括起来
        //state参数:是state()中return中的对象，它是vuex自动给我们注入进来的。我们调用的时候不需要传递这个参数，直接传递第二个参数boolParams即可：如：this.$store.commit("changeAppIsShow", false);这个false就是我们的传参
        //params可选参数：用户传递的参数,这个参数具体传递的是int，bool，string,obj，由用户决定。这里我们根据我自己的业务需要一个bool值
        [CHANGE_APPISSHOW]: (state, boolParams) => {   
            state.appIsShow = boolParams;
        }

        //可以简写成如下方法：
        // changeAppIsShow(state, boolParams) {
        //     state.appIsShow = boolParams;
        // }
        //或者
        // [CHANGE_APPISSHOW](state, boolParams) {
        //     state.appIsShow = boolParams;
        // }
    }
});

export default store

组件中使用：

<template>
    <div>Home
    </div>
</template>
<script>
import { CHANGE_APPISSHOW } from '../store/type.js'
export default {
    beforeMount() {
        //向Mutation提交数据，并指定触发一个名称为changeAppIsShow的事件,同时为这个事件绑定的回调函数传递了一个值为false的参数
        //this.$store.commit("changeAppIsShow", false);

        //上面代码也可以采用这种常量的方式来处理：当然我们也可以不用，就用上面的写法也行。
        this.$store.commit(CHANGE_APPISSHOW, false); //CHANGE_APPISSHOW 的值就是changeAppIsShow，所以这段代码等同于：this.$store.commit("changeAppIsShow", false); 这样做的好处是：当我们要避免命名冲突，改变changeAppIsShow的命名，只要在store/type.js文件下修改CHANGE_APPISSHOW常量的值就行，因为大家都是以this.$store.commit([CHANGE_APPISSHOW], false); 方式来用的，修改了常量的值，所有对这个常量的引用全部就修改了
    },

    beforeUnmount() {
        //向Mutation提交数据，并指定触发一个名称为changeAppIsShow的事件,同时为这个事件绑定的回调函数传递了一个值为true的参数
        //this.$store.commit("changeAppIsShow", true);

        //上面代码也可以采用这种常量的方式来处理：当然我们也可以不用，就用上面的写法也行。
        this.$store.commit(CHANGE_APPISSHOW, true);
    }
}
</script>