1.什么是vuex？

Vuex 是专门为 Vue.js 设计的状态管理库。

这样就造成了一个问题，如果是多个组件共同使用的时候他们所使用的 state 状态中的数据源都是一样的，如果一个组件改变 state 初始状态数据源变化，就会导致其他的组件也会发生变化。

2.安装 vuex

3.vuex的核心就是 store（仓库）

每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，包含应用中大部分的 state（状态）。Vuex 和单纯的全局对象的区别：

Vuex 的状态存储是响应式的。Vue 组件从 store 中读取状态数据源，若 store 中的 state 发生变化，那么相应的组件也会得到高效的更新。
store 中的 state 是无法直接改变的。只能通过唯一的途径就是 commit mutation（提交变化）

4.创建一个简单的 store （仓库）

store.state 来获取仓库状态中的对象

store.commit 触发状态变更

5.组件访问store中state中的数据？

方法一组件通过 this.$store.state.count 获取

tip：再template 标签里面访问 store里面的state对象，这里的 this.$store.state.count 中的 this 是可以省略的，可以直接写 { { $store.state.count }}

方法二 import { mapstate } from ‘vuex’ ------》 computed:{ ...mapstate(['count']) }

这里导入的mapstate 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性

这两种方法，看实际应运中哪个方便就用哪个。

6.Vuex的核心概念 Mutation

例子：

打比方要再增加组件中实现点击按钮然后store>index.js 中的 count 值发生增加效果

实现思路：1.添加绑定事件 2.methods节点逻辑输出 3.结构插值法显示值

这个时候就需要引入一个新的知识点来解决这个问题，就是 Mutation 。

Mutation 用于变更 Store 中的数据。

只能通过 mutation 变更 Store 中的数据，不可直接操作 Store 中的数据。
通过 mutation 这种方式虽然操作起来有点繁琐，但是可以集中监控所有数据的变化。

集中监控所有数据的变化。什么意思呢？打比方你写的项目很大，很多组件都用到了仓库sore 中的初始数据，那么现在有一个组件对仓库中的数据发生了变化有问题，你现在去找就不知道是哪个组件修改了这个数据。

如果是传参的话就是

this.$store.commit() 是触发 mutation 的第一种方式。

触发 mutation 的第二种方式：

// 1.从 vuex 中按需导入 mapMutations 函数

import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数，将需要的 mutation 函数，映射为当前组件的 mthods 方法：

// 2.将指定的 mutations 函数，映射为当前组件的 methods 函数

methods：{

...mapMuatation(['add','addN']),

}

<template>
  <div>
    <h3>当前最新的count值：{
   
   {count}}</h3>
    <button @click="btnHandler1">-1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    /* 把全局里面的 count 映射到 当前组件的计算属性，
    这样的话再使用全局数据的时候就像再用一个计算属性一样简单 */
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['sub']),
    btnHandler1() {
      this.sub()
    },
  },
}
</script>

<style lang="less" scoped>
</style>

通过点击button ，触发点击事件 btnHandler1 ,直接调用 this.sub() 如果是步长值还是在这里添加（step）

如果你想让加1的这个效果延迟1秒显示，那么你不能在全局 store>index.js 中在 mutations 中的函数里使用 setTimeout函数

add(state){
    setTimeout(()=>{
        state.count++
    },1000)
}

这个是没有用的，这个 setTimeout函数是异步操作。如果非要执行异步操作这个时候就有一个新的人出现了就是 Action 。

Action 是专门来处理异步任务的。

如果通过异步操作变更数据，必须通过 Aciton，而不能使用 Mutation，但是在Action 中还是要通过触发 Mutation 的方式间接变更数据。

// 定义 Action

const store = new Vuex.Store ({

// ... 省略其他代码

mutations: {

          add(state) {

state.count++

                }

        },

actions: {

addAsync(context) { // 异步的执行 add的操作

setTimeout( () => {

context.commit( 'add' ) // commit 只能去 commit mutations里面的某个                                                                   函数通过commit触发mutations里的 add() 函数

                        } , 1000) // 延迟1s后调用这个回调函数

                }

        }

})

这里的 addAsync 是指：异步的执行 add这个函数的操作

actions: {
    addAsync(context) {
      //第一个形参可以用 context 来接收，这个context 可以认为就相当于 new 出
      // 来的 store 的实例对象，在这实力对象中有这个 commit 函数
      setTimeout(() => {
        // 在 Actions 中，不能直接修改 state 中的数据
        // 如果要修改必须通过 context.commit() 这个函数去触发某个 mutation 才行
        context.commit('add')
      }, 1000)
    },
  },

在所用的组件中的 methods节点中放入点击按钮 btnHandler3 事件

/* 异步的让 count 自增 +1 */
    btnHandler3() {
      /* 这里的 dispatch() 函数，专门用来触发 Actions */
      this.$store.dispatch('addAsync')
    },

7.vuex 的核心概念 Getter

Getter 用于对 store 中的数据进行加工处理形成新的数据。

Getter 可以对 store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。不会修改 store 中的数据。
Store 中的数据发生变化，Getter 包装出来的新数据也响应式的会发生变化

使用 getters 的第一种方法：

this.$store.getters.名称如下名称为 newCount

使用 getters 的第二种方法：

import { mapGetters } from 'vuex'

computed: { ...mapGetters (['showNum']) }

【Vuex】对Vuex的理解