Vuex五个核心概念

news/2024/7/10 1:09:22 标签: vue

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

State

单一状态树
vuex的基本数据，用来存储变量

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 存储共享数据  映射到 computed   ...mapState(["属性名"])
    // 数据类型可以是 数值、字符串等基本类型，也可以是{}、[]、[{},{}]
    // 不推荐直接操作，而应该使用 actions
    user: {
      id: 1,
      name: "张三"
    }
  },

Getter

从基本数据(state)派生的数据，相当于state的计算属性

getters: {
    // 主要用对共享数据进行显示调整  1/2=>男/女
    // 映射到 computed   ...mapGetters(["属性名"])
    info(state) {
      return `编号：${state.user.id}  姓名：${state.user.name}`;
    }
  },

Mutation

提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。　回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

 mutations: {
    // 直接操作 state 里的数据
    // 映射到 methods   ...mapMutations(["方法名"])
    // 不推荐直接操作，而应该使用 actions
    setUser(state, name) {
      state.user.name = name;
    }
  },

Action

和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

actions: {
    // 间接操作 state 里的数据，通过调用 mutations 里的函数
    // 映射到 methods   ...mapActions(["方法名"])
    setUser(context, name) {
      context.commit("setUser", name)
    }
  },

Module

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },

看一下案例效果
在这里插入图片描述