Vuex的理解

一：简介

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

二：优点

1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

三：安装步骤

1.安装

npm install vuex --save

2.引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3.创建仓库store
要使用Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

//创建一个 store
 const store = new Vuex.Store({
   });

四：主要包括以下几个模块

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

1.State

假设我们有一个全局状态count的值为5。那么，我们就可以将其定义为 state 对象中的key和value，作为全局状态供我们使用。如下：

//创建一个 store
 const store = new Vuex.Store({
   
    //state存储应用层的状态
    state:{
   
        count:5  //总数：5
    }
 });

2.Getters

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters
getters 接受 state 作为其第一个参数

const store = new Vuex.Store({
   
   //state存储应用层的状态
   state:{
   
      count:5  //总数：5
   },
   getters:{
   
      newCount:state => state.count * 3
   }
 });

在组件中获取{ {newCount}}方式：

export default {
   
  computed: {
   
      newCount(){
   
          return this.$store.getters.newCount;
      }
  }
};  

3. Mutations

Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation ，且必须是同步函数

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方
会接受 state作为第一个参数，第二个是自定义传参

const store = new Vuex.Store({
   
    //state存储应用层的状态
    state:{
   
        count:5  //总数：5
    }