什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）
让其在各个页面上实现数据的共享包括状态，并且可操作

vue中各个组件之间传值

1.父子组件
父组件–>子组件，通过子组件的自定义属性：props
子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…);

2.非父子组件或父子组件
通过数据总数Bus，this.$root.$emit(‘事件名’,参数1,参数2,…)

3.非父子组件或父子组件
更好的方式是在vue中使用vuex

方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。
方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

官方图解Vuex

Vuex中的各个js文件的用途

变量传值的演变形式

图解Vuex各组件
在这一张图我们可以看的出Vuex的性能非常好，总线传值有很大的缺陷存在，所以我们这次重点会讲解Vuex这个版块。

vuex使用步骤

1 安装模块

npm install vuex -S

创建store模块，分别维护state/actions/mutations/getters

在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块
index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './State'
import getters from './Getters'
import actions from './Actions'
import mutations from './Mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
  state, // 共同维护的一个状态，state里面可以是很多个全局状态
  getters, // 获取数据并渲染
  actions,// 数据的异步操作
  mutations// 处理数据的唯一途径，state的改变或赋值只能在这里
})
export default store

在main.js中导入并使用store实例

import store from ‘./store’

取值案例(同步取值)

State.js(保存数据的容器)

export default{
resturantName:'飞歌餐厅' //定义一个变量
}

创建一个VuePage1,通过this.$store.state.resturantName;可以直接获取到值，但是不建议使用，为了电脑性能讲究的是分模块。
Getters.js

export default {//取值界面
  GetResturantName: (state) => {
    return state.resturantName;
  }
}

注1：getters将state中定义的值暴露在this.$store.getters对象中，我们可以通过如下代码访问this.$store.getters.resturantName

注2：state状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：
computed: {
resturantName: function() {
return this.$store.getters.resturantName;
}
}
Mutations.js
处理数据的唯一途径，state的改变或赋值只能在这里

export default { //存值界面
//state： 存储变量的容器
// payload： 一个保存要传递参数的容器，一个存储数据的json对象
  setResturantName: (state,payload) => {
     state.resturantName = payload.resturantName;
  }
}

注1：mutations中方法的调用方式
不能直接调用this.$store.mutations.setResturantName{(}^{\prime }KF{C}^{\prime })，必须使用如下方式调用：this.$store.commit(type,payload);

     		 // 1、把载荷和type分开提交
           store.commit('setResturantName',{
             resturantName:'KFC'
           })

           // 2、载荷和type写到一起
          store.commit({
            type: 'setResturantName',
            resturantName: 'KFC'
          })

注2：一定要记住，Mutation 必须是同步函数。为什么呢？异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了
如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了
VuePage1.vue
创建完vue记得在路由里配置

<template>
  <div>
    <h3>页面一,欢迎来到{{msg}}</h3>
    <button @click="buy">盘他(同步)</button>
    <button @click="buyAsync">刚他(异步)</button>
    <button @click="doAjax">干他</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    computed: {
      msg() {
        // return "KFC"
        //return this.$store.state.resturantName; //简单取值方式 不建议使用
        return this.$store.getters.GetResturantName;
      }
    },
    methods: {
      buy() {
        this.$store.commit('setResturantName', {
          resturantName: '肯德基'
        });
      },
      buyAsync() { //异步
        this.$store.dispatch('setResturantNameByAsync', {
          resturantName: '麦当劳'
        });
      },
      doAjax() {
        this.$store.dispatch('doAjax', {
          _this:this //传入this
        });
      }
    }
  }
</script>

<style>
</style>

VuePage2.vue

<template>
  <div>
    <h3>页面二,欢迎来到{{msg}}</h3>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    computed: {
      msg() {
        // return "KFC"
        // return this.$store.state.resturantName;//简单取值方式 不建议使用
      return this.$store.getters.GetResturantName;
      }
    }
  }
</script>

<style>
</style>

效果

VuePage2也变了

异步与同步的区别

举个例子：
比如你需要做两件事：吃饭，看电视
同步：先吃完饭再去看电视
异步：边吃饭边看到电视
由此可见，异步效率更高
Actions.js
这里做的是一个6延迟变化效果

export default { //写所有异步操作
  setResturantNameByAsync: (context, payload) => { //context是有一个大容器
    console.log('xxxx');
    setTimeout(() => {
      console.log('yyyy');
      console.log(payload)
      // state.resturantName = payload.resturantName;
      context.commit('setResturantName', payload); //Action提交的是mutation
    }, 6000) //延迟3秒后执行setTimeout里面代码内容
    console.log('zzzz');

    //在这里面是获取不到this的(Vue的根实例)
  },
  doAjax: (context, payload) => {
    let _this = payload._this //接收this
    let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;
    _this.axios.post(url, {}).then((response) => {
        console.log(response);
    }).catch(function(error) {
    console.log(error);
  });

}
}

Actions获取this

注：在Actions.js里获取不到this的(Vue的根实例)

测试

报错信息为:无法获取到urls，urls未定义
原因：因为this无法使用，使用无法获取到this.urls
解决：
VuePage1界面传入this

doAjax() {
        this.$store.dispatch('doAjax', {
          _this:this //传入this
        });
      }

Actions里接收_this,再将所有this改为_this

  doAjax: (context, payload) => {
    let _this = payload._this //接收this
    let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;
    _this.axios.post(url, {}).then((response) => {
        console.log(response);
    }).catch(function(error) {
    console.log(error);
  });

}

Action类似于 mutation，不同在于

1.Action提交的是mutation，而不是直接变更状态
   2.Action可以包含任意异步操作
   3.Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性
     但是他们并不是同一个实例，context 包含：
     1. state、2. rootState、3. getters、4. mutations、5. actions 五个属性
     所以在这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
 
   
   注1：actions中方法的调用方式语法如下：
        this.$store.dispatch(type,payload);
        例如：this.$store.dispatch('setResturantNameByAsync',{resturantName: '啃德鸡2'});
 
   注2：action中提交mutation
        context.commit('setResturantName',{resturantName: '啃德鸡2'});
 
   注3：VUEX 的 actions 中无法获取到 this 对象
        如果要在actions 或者 mutations 中使用this对象。可以在调用的时候把this对象传过去
        {resturantName: '啃德鸡2',_this:this}//this就是在调用时的vue实例      
 
   Vuex中actions的使用场景
   场景1：部门管理中添加或删除了新的部门，员工新增/编辑页面的部门列表需要进行变化   
   场景2：vuex之使用actions和axios异步初始购物车数据