如何使用vuex?&&如何安装vuex？

今日目标：

1、了解vuex中的各个js文件的用途
2、利用vuex同步存值
3、利用vuex取值
4、Vuex的异步加载问题及后台调用问题

Vuex的作用：

变量传值的演变形式：（解决传值问题）

vue中各个组件之间传值

vue中各个组件之间传值   
   1.父子组件
   父组件-->子组件，通过子组件的自定义属性：props
   子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...);
 
   2.非父子组件或父子组件
   通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...)
 
   3.非父子组件或父子组件
   更好的方式是在vue中使用vuex
 
   方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。
   方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

Vuex中的各个js文件的用途：

vuex是专为vue.js应用程序开发的状态管理模式。
vuex用于集中管理整个vue项目中的所有变量，就好比一个数据库

图解Vuex各组件：

官方图解： 

Vuex分成五个部分：

   Vuex分成五个部分：
   1.State：单一状态树
   2.Getters：状态获取
   3.Mutations：触发同步事件
   4.Actions：提交mutation，可以包含异步操作
   5.Module：将vuex进行分模块

一，使用vuex

1  首先，进行环境配置：安装vuex

 npm install vuex -S

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

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

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,
  getters,
  actions,
  mutations
})

export default store

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

5  建立VuexPage1.vue和VuexPage2.vue俩个组件用来进行测试，然后配置路由

 6  开发，使用vuex的相关功能 

vuex的核心概念：store、state、getters、mutations、actions

store
      每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
      const store = new Vuex.Store({
       state,    // 共同维护的一个状态，state里面可以是很多个全局状态
       getters,  // 获取数据并渲染
       actions,  // 数据的异步操作
       mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
      })

二，取值

2.1  state.js(保存数据的容器)

Getters.js（利用箭头函数取值） 

 2.2  两种取值方式  前端布局：

取值方式：

注：

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

     注2：state状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：
          computed: {
            resturantName: function() {
              return this.$store.getters.resturantName;
            }
          }

运行效果：

三，mutations同步传值（也就是set值）

Mutations.js（处理数据的唯一途径，state的改变或赋值只能在这里）

前端布局：

 调用：

 注：

注1：mutations中方法的调用方式
不能直接调用this.$store.mutations.setResturantName('KFC')，必须使用如下方式调用：
    this.$store.commit(type,payload);
 
    // 1、把载荷和type分开提交
    store.commit('setResturantName',{
       resturantName:'KFC'
    
    // 2、载荷和type写到一起
    store.commit({
       type: 'setResturantName',
       resturantName: 'KFC'
    })
           
注2：一定要记住，Mutation 必须是同步函数。为什么呢？异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了
如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了

运行效果：

四，Vuex异步加载(action.js)

action.js（在六秒后调用）

前端布局：

调用：

注：

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'});

运行效果：

五， Vuex与后台的交互

前端布局：

调用：

注：

注3：VUEX 的 actions 中无法获取到 this 对象
如果要在actions 或者 mutations 中使用this对象。可以在调用的时候把this对象传过去
{resturantName: ‘啃德鸡2’,_this:this}//this就是在调用时的vue实例

Vuex中actions的使用场景
场景1：部门管理中添加或删除了新的部门，员工新增/编辑页面的部门列表需要进行变化
场景2：vuex之使用actions和axios异步初始购物车数据

运行效果：

六，总代码

VuexPage1.vue

<template>
  <div>
    <h4>页面一：欢迎来到{{msg}}</h4>
    <button @click="panta">盘它</button>
    <button @click="pantaAsync">最后的老板</button>
    <button @click="doAjax">vuex与后台交互</button>
  </div>
</template>

<script>
  export default {
    name: 'VuexPage1',
    data() {
      return {

      }
    },
    methods: {
      panta() {
        this.$store.commit("setResturantName", {
          resturantName: "小罗饭馆"
        })
      },
      doAjax() {
        this.$store.commit("doAjax", {
          _this:this
        })
      },
      pantaAsync() {
        this.$store.dispatch("setResturantNameAsync", {
          resturantName: "小罗酒店"
        })
      }
    },
    computed: {
      msg() {
        // return "KFC";
        // return this.$store.state.resturantName;  方式一  不太安全
        return this.$store.getters.getResturantName;
      }
    }
  }
</script>

<style>
</style>

VuexPage2.vue

<template>
  <div>
    <h4>页面二：欢迎来到{{msg}}</h4>
  </div>
</template>

<script>
export default {
  name: 'VuexPage2',
  data () {
    return {

    }
  },
  computed:{
    msg(){
      return this.$store.getters.getResturantName;
    }
  }
}
</script>

<style>
</style>

Actions.js

export default {
  // context等价于this.store，也就是它代表了vue的上下文
  setResturantNameAsync: (context, payload) => {
    // 在这个文件中是可以调用同步文件mutations定义的同步方法
    // context.commit("setResturantName", payload);
    setTimeout(function(){
      context.commit("setResturantName", payload);
    },6000)
  }
}

Mutations.js

export default {
  // state：state文件
  // payload：载荷，其实就是一个保存要传递参数的容器
  setResturantName: (state, payload) => {
    state.resturantName = payload.resturantName;
  },
  doAjax: (state, payload) => {
    let _this = payload._this;
    let url = _this.axios.urls.SYSTEM_MENU_TREE;
    _this.axios.post(url, {}).then((resp) => {
      console.log(resp);
    }).catch(function(error) {
      console.log(error);
    });
  }
}

总结：

vuex 解决了：spa项目原有的总线传参，变量定义过于分散，不方便项目维护，这一问题

 OK! 到这就结束了，希望能帮到你！！！