Vuex

什么是Vuex？可以解决什么问题？

Vuex是Vue.js应用程序的状态管理模式+库。
Vuex是一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。

Vuex有哪些属性？

1. state：即Vuex中的基本数据
2. getters：相当于state的计算属性
3. mutation：提交更改数据的方法，必须是同步函数
4. action：像一个装饰器，包裹mutations，使之可以异步
5. modules：模块化Vuex

使用方法

在vue-cli已安装Vuex的情况下，直接引用。
如果没有安装的话：

1. 安装Vuex，使用命令：cnpm install vuex --save 进行安装
2. 在src下新建一个名为vuex的文件夹
3. vuex文件夹里面新建一个store.js
   
4. 在刚刚创建的store.js引入vue和vuex，并且使用use Vuex
   
5. 定义数据
   
6. 定义方法
   
7. 实例化Vuex.store
   
8. 暴露
   

完整代码如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//state在vuex中用于储存数据  state=状态
var state = {
    count: 1
}

// mutations里面放的是方法，方法主要用于改变state中的数据  mutations=改变
var mutations = {
    incCount(){
        ++state.count;
    }
}

//vuex 实例化 Vuex.store
const store = new Vuex.Store({  //store储存
    state,
    mutations:mutations
})

// 暴露
export default store;

在组件中引入Vuex

1、在组件中引入store.js
2、注册

3、获取state里面的数据
第一种：this.$store.state

第二种：

4、触发mutations改变state里面的数据

this.$store.commit(‘incCount’)

完整代码如下

<template>
  <div class="hello">
    <h1>{{ this.$store.state.count }}</h1>
  </div>
</template>

<script>
import store from "../vuex/store.js" //引入store
export default {
  data () {
    return {
      msg: store.state.count
    }
  },
  store,  //注册
  methods:{
    incCount(){
      this.$store.commit('incCount');  /*触发 state里面的数据*/
    }
  }
}
</script>

Vuex dispatch和commit来调用mutations的区别

dispatch：含有异步操作，例如向后台提交数据。

写法：this.$store.dispatch('mutations方法名'，值)

commit：同步操作

写法：this.$store.commit('mutations方法名'，值)