VueX

Vuex

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

简而言之,Vuex 采用类似全局对象的形式来管理所有组件的公用数据,如果想修改这个全局对象的数据,得按照 Vuex 提供的方式来修改(不能自己随意用自己的方式来修改)

1 安装和使用

1.安装 Vuex

1
npm install vuex --save

2.引用 Vuex

1
2
3
4
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
123;

3.创建仓库 Store

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

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

2 单界面的状态管理

单界面的状态管理

  • State:不用多说,就是我们的状态。(你姑且可以当做就是 data 中的属性)
  • View:视图层,可以针对 State 的变化,显示不同的信息。
  • Actions:这里的 Actions 主要是用户的各种操作:点击、输入等等,会导致状态的改变。

3 单界面的状态管理的代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div class="test">
<div>当前计数:{{counter}}</div>
<button @click="counter+=1">+1</button>
<button @click="counter-=1">-1</button>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data() {
return {
counter: 0,
};
},
};
</script>

<style></style>
  1. 在这个案例中, 我们有个 counter 需要管理
  2. counter 需要被某种方式被记录下来,也就是我们的 State
  3. counter 目前的值会显示在界面上, 也就是我们的 View 部分
  4. 界面发送某些操作时, 比如我们这里使用的是 点击事件 , 需要去更新状态, 也就是我们的 Actions

4 Vuex 的核心概念和 API

主要理解实例中下面这些对象是如何运作的。

流程:View -> Actions -> Mutations -> State -> View

Vuex的核心概念

1、 state

  1. vuex 管理的状态对象

  2. 它应该是唯一的
    const state = {
    xxx: initValue
    }

2、 mutations

​ 1) 包含多个直接更新 state 的方法(回调函数)的对象
​ 2) 谁来触发: action 中的 commit(‘mutation 名称’)
​ 3) 只能包含同步的代码, 不能写异步代码
​ const mutations = {
​ yyy (state, {data1}) {
​ // 更新 state 的某个属性
​ }
​ }

3、 actions

  1. 包含多个事件回调函数的

  2. 通过执行: commit()来触发 mutation 的调用, 间接更新 state

  3. 谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz

  4. 可以包含异步代码(axios)

const actions ={

zzz ({commit, state}, data1)

​ commit(‘yyy’, {data1})

}

}

4、 getters

  1. 包含多个计算属性(get)的对象(也就是说,getters 是用来放 state 里面的变量的计算属性的)

  2. 谁来读取: 组件中: $store.getters.xxx

    const getters ={

    xxx(state) {

​ return …

​ }

}

5、 modules

  1. 包含多个 module

  2. 一个 module 是一个 store 的配置对象

  3. 与一个组件(包含有共享数据)对应

5 Vuex 的运作流程

Vuex 的运作流程

Vuex的运作流程

流程详解

① 在组件(页面)中,通过 dispatch()或 mapActions()这个函数分发给 actions 的函数去处理。

② actions 的函数可以与后台交互,也可以通过 commit() 提交给 mutations 去处理。

③ mutations 可以直接与 devtool(如本地存储工具 → 在实例代码中的 utils 里的 storageUtils.js)交互与直接更新 state(数据状态)。

④ 如果有计算属性(get 函数写在 getters 里面),则状态通过 getters 的$store.getters()或**mapGetters()来更新组件;反之就通过$store.state()或者mapState()**的方式来更新组件。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!