导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

文章来源：

Vuex 的基本使用

Vuex 工作流程

vuex 为项目开发提供了状态管理及数据共享能力；

在项目开发中，使用 vuex 能够将所有的数据统一存储到一个 store 容器中进行管理；

如下图所示，绿色虚线框即为 vuex 的管理范围，表示一个容器：

Untitled

🔥 actionType

标准流程：

vuex 的基本使用介绍

1，vuex 的核心概念

在 vuex 官方文档中，核心概念共有以下五个：

2，vuex 插件配置

引入并通过 Vue.use(Vuex) 安装 vuex 插件，配置并导出 store 实例:

// src/store/index.js

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

// 注册 vuex 插件：内部会调用 Vuex 的 install 方法
Vue.use(Vuex);

// 实例化容器:Vuex.Store
const store = new Vuex.Store({
  // state 状态：相当于组件中的 data 数据
  state: {
    num: 10
  },
  // getters 相当于计算属性（内部实现利用了计算属性）
  getters: {

  },
  // 相当于 method，能够同步的更改 state
  mutations: {

  },
  // action作用:执行异步操作，并将结果提交给 mutations
  actions: {

  }
});

export default store;// 导出 store 实例，传入根组件

备注：此处为简单配置，尚未引入 Vuex 模块化及命名空间概念；

在 main.js 中导入配置完成的 store 实例；

在 new Vue 初始化时，将 store 实例注入根组件：

// main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store/index' // 引入 store 实例

new Vue({
  store,// 将 store 实例注入到 vue 中
  render: h => h(App),
}).$mount('#app');

此时，vuex 插件配置完成，可直接在页面中测试使用；

3，state 的使用

在 App.vue 中， template 中直接输出 store 容器中的状态 num：

// src/App.vue

<template>
  <div id="app">
    商品数量: {{this.$store.state.num}} 个<br>
  </div>
</template>

执行 npm run serve 启动服务：

Untitled

⚪️ 🔥 问题：this.$store.state.num 是如何获取到状态的？

这里涉及 Vuex 插件初始化，与 vue-router 安装流程相似；

当执行`Vue.use(Vuex)`时，会调用 **install** 方法，为**每个子组件都混入了当前的 store 容器实例**；

new Vue 是根实例；App.vue 是根实例的子组件；

所以，new Vue 中传入的 store 实例，install 时会被混入到 App.vue 组件上；

同理，最终所有组件都将混入来自父组件的 store 实例，从而实现 store 容器实例的共享；

4，getters 的使用

getters 的内部实现依赖了 computed；

所以，可以理解为 Vue 的 computed 计算属性；

// main.js

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

// 注册 vuex 插件：内部会调用 Vuex 中的 install 方法
Vue.use(Vuex);

// 实例化容器容器:Vuex.Store
const store = new Vuex.Store({
  state: {
    num: 10
  },
  getters: {
    // 根据商品数量计算总价格
    getPrice(state) {
      return state.num * 10
    }
  },
});
export default store;

在 template 中，使用 getters 方法 getPrice：

// src/App.vue

<template>
  <div id="app">
    商品数量: {{this.$store.state.num}} 个<br>
    商品单价: 10 元<br>
    订单金额: {{this.$store.getters.getPrice}} 元<br>
  </div>
</template>

Untitled

备注:由于 getters 具备计算属性特性，当依赖的 state 状态改变时，会触发更新；

5，mutation 的使用

在 vuex 中，通过 commit 提交 mutation 是更新状态的唯一方式；

mutation 方法：

// src/store/index.js

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    num: 10
  },
  mutations: {
    // 更新 num
    changeNum(state, payload) {
      state.num += payload;
    }
  }
});
export default store;

在 template 中,直接调用 commit 方法提交 mutation，同步更新状态：

// src/App.vue

<template>
  <div id="app">
    商品数量: {{this.$store.state.num}} 个<br>
    商品单价: 10 元<br>
    订单金额: {{this.$store.getters.getPrice}} 元<br>
    <button @click="$store.commit('changeNum',5)">同步更新：数量+5</button>
  </div>
</template>

点击同步更新按钮，触发 mutation 方法，视图更新：

Untitled

6，action 的使用

组件通过调用 dispatch 触发 action 执行异步请求返回结果数据，再通过 commit 提交 mutation 完成状态更新；

在 action 方法中：

备注：