Vuex 状态管理

Vuex

概述

Vuex 是一个状态管理库，用于管理 Vue.js 应用程序中的共享状态。它可以帮助你在应用程序中保持数据的一致性和可预测性。

Vuex包括以下几个核心概念：

• state：存储应用程序的状态数据。
• getters：提供一种计算派生状态的方式，类似于Vue.js中的计算属性。
• mutations：用于修改状态的方法，但是只能进行同步操作。
• actions：用于提交mutations，可以进行异步操作。
• modules：将store拆分为模块，每个模块都有自己的state、getters、mutations和actions。

Vuex 官方文档

安装

npm install vuex@next --save

单向数据流

这是一个单向数据流：

• 状态：驱动应用的数据源。
• 视图：以声明方式将状态映射到视图。
• 操作：响应在视图上的操作导致的状态变化。

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

Vuex核心概念

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

Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

State

用于存储应用程序的状态数据。

• 在Vue组件中，通过 this.$store 访问store实例。
• 通过$store.state获取状态对象。
• Vuex 的状态存储是响应式的。

支持Vuex

import store from "./store";

const app = createApp(App);
// 将 store 实例作为插件安装
app.use(store);
app.mount("#app");

定义store对象

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0,
    };
  }
});
export default store;

使用store

mapState 辅助函数

使用mapState辅助函数可以简化代码，如：将{{ $store.state.count }}简化为{{ count }}。

当映射的计算属性的名称与 state 的子节点名称相同时，也可以给 mapState 传一个字符串数组：

扩展运算符

computed属性在Vue组件中只能有一个，可以使用对象扩展运算符兼容局部计算属性。

Getter

提供一种计算派生状态的方式，类似于Vue.js中的计算属性，例如对列表进行过滤并计数。

从 Vue 3.0 开始，getter的结果不再像计算属性一样会被缓存起来。

定义store对象

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      msg: "hello world",
    };
  },
  getters: {
    reverseMsg(state) {
      return state.msg.split("").reverse().join("");
    },
    reverseMsgLength(state, getters) {
      return getters.reverseMsg.length;
    },
  }
});
export default store;

在Vue中使用

mapGetters 辅助函数

可以通过mapGetters辅助函数将getter映射到计算属性中。

Mutation

用于修改状态的方法，但是只能进行同步操作。

• 使用$store.commit()方法触发mutation函数。

定义store对象

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    //修改状态的方法
    increment(state) {      
      state.count++;
    },
  },
});
export default store;

在Vue中使用

提交载荷

你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）。

在store对象中定义

mutations: {
    add(state, num) {
        state.count += num;
    },
},

使用

提交载荷对象

在store对象中定义

mutations: {
    add2(state, payload) {
        state.count += payload.num;
    },
}

使用

对象风格提交

this.$store.commit({
    type: "add",
    num: 20
})

使用常量替代mutation事件类型

定义mutation-type.js文件

export const ADD = "add";

在store对象中使用

import { createStore } from "vuex";
import { ADD } from "../mutation-type";

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    [ADD](state, num) {
      state.count += num;
    }
  },
});
export default store;

Action

用于提交mutations，可以进行异步操作。

• 使用$store.dispatch()方法触发actions中定义的函数。

在store对象中定义

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    },
  },
});
export default store;

在Vue中使用

**使用参数解构简化代码 **

actions: {
    increment({ commit }) {
        commit("increment");
    },
},

异步分发

在store对象中定义

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit("increment");
      }, 1000);
    },
  },
});
export default store;

在Vue中使用

Module

将store拆分为模块，每个模块都有自己的state、getters、mutations和actions。

新建user模块

const user = {
  state() {
    return {
      userName: "xiaoming",
    };
  },
  getters: {
    userNameAge(state, getters, rootState) {
      return state.userName + " 18岁";
    },
  },
  mutations: {
    updateUserName(state) {
      state.userName = "小明";
    },
  },
};
export default user;

添加子模块

import { createStore } from "vuex";
import user from "./user";

const store = createStore({
  modules: {
    user,
  },
});
export default store;

访问user模块

命名空间

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

新建Student的store对象

const student = {
  namespaced: true, //开启命名空间
  state() {
    return {
      userName: "xiaohei",
    };
  },
  getters: {
    userNameAge(state, getters, rootState) {
      return state.userName + " 8岁";
    },
  },
  mutations: {
    updateStudentName(state) {
      state.userName = "小黑";
    },
  },
};
export default student;

在Vue3中使用