【Vuex】对Vuex的理解

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']),

}

 通过点击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']) }