Vuex - 简单使用及核心概念

147 阅读3分钟

权威内容可查看官方文档

1. Vuex是什么

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

简单说,就是通过Vuex对组件间数据进行统一管理,数据操作都需要通过Vuex实现。

假设想要让组件A和B实现共用某一个数据,我们可能会设置一个全局变量,window.xxx,这样在AB中都能使用到该变量,但是比如在A中修改了该变量,为保持两者数据一致,修改时应该通知B该变量已修改……变量多了,操作更是麻烦,个人理解Vuex就是解决这些事情的

2、安装使用

安装

yarn add vuex

使用

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

Vue.use(Vuex)

创建仓库store

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。

需要提供一个state对象和mutations对象

const store = new Vuex.Store({
  state: {//data
    recordList: [],
  },
  mutations: {//methods
      create(){},
      update(){}
  }
});

在根实例中注入store

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

3、Vuex核心概念

image.png

Vuex状态管理的流程:

view ==> actions ==> mutations ==> state ==> view

3.1 state

state是Vuex管理的状态对象,是唯一的。可理解为data

const state = {
    key:initValue
}

3.2 mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。可理解事件/方法。

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。

上面的type和handler会有点让没接触过类似概念的一时反应不过来,下面第二段代码中的mutations中的increment换成ES5语法等价于

mutations:{
    increment:function(state){
        state.count++
    }
}

这个可以分辨出,事件类型对应键/属性名,回调函数对应值。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
    increment1 (state, n) {
      state.count += n
    }
    increment2 (state, payload) {
      state.count += payload.amount
    }
  }
})
mutations不能直接调用,而需要调用`store.commit`的方法,第一个参数为的mutation的type,同时可传入payload载荷,可直接传入参数,但建议使用对象。
store.commit('increment')
store.commit('increment1',10)
store.commit('incremnent2,{amount:10}

同时,也可使用对象风格的提交方式,直接使用包含type的对象

store.commit({
    type:increment2,
    amount: 10
})

对象中type以外的内容会作为payload对象。

mutation都必须为同步函数。

3.3 actions

action与mutation类似,都可理解为方法,不同点在于:

  • Action 提交的是 mutation,而不是直接变更状态(state)。
  • Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象。可以通过该context对象来调用mutation,或者获取state等。

action中只能对mutation进行操作。

以析构的方式来写一个actions:

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
//以上等价为
actions: {
  increment (context) {
     context.commit('increment')
  }
}

action通过store.dispatch来触发,传值方式类似于mutation。

  • mutation 和 action 的区别

    • 参数:mutation 接收的参数是state状态,action接收的参数是context上下文对象
    • 调用方式:mutation使用store.commit,action使用store.dispatch
    • 操作要求:mutation只能执行同步操作,action可以执行异步操作

3.4 getters

getter类似于计算属性,依赖store中的state,且返回值有缓存,仅在依赖发生变化时重新计算。

getters: {
    getxxx: state => {
      return state.xxx.filter(...)
    }
  }

让getter返回一个函数,实现对getter传参

getters: {
  getxxxById: (state) => (id) => {
    return state.xxx.find(...)
  }
}

获取getter,以属性形式

store.getters.getxxxById
store.getters.getxxxById(1)

3.5 modules

Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。