你知道的状态管理库Vuex

Nw
340 阅读4分钟

什么是Vuex？

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

什么时候使用Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。如果我们开发的是一个简单的单页应用项目，可能不需要使用 Vuex。但是，当我们需要处理复杂的组件通信、跨组件的数据共享、组件状态的复用、统一状态管理等功能时，就需要使用像 Vuex 或 Pinia 这样的状态管理库来帮助我们管理项目中的状态。

如何使用Vuex？

首先还是安装库

npm install vuex@next --save

这个后面添加个--save会将我们安装的包添加到package.json 文件的 dependencies 部分。这意味着如果我们的项目被别人克隆并且运行npm install 时，npm 会自动安装 package.json 中列出的所有依赖。但在npm 5.0.0 及其之后版本中，--save 选项已经是默认行为，所以我们也可以不用添加。

搭建store

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state) 。Vuex 和单纯的全局对象有以下两点不同：

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

import { createStore } from 'vuex';

const store = createStore({
  // 定义应用程序的全局状态
  state: {
    count: 0,
    user: null
  },

  // 同步变更状态
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    setUser(state, user) {
      state.user = user;
    }
  },

  // 异步操作，可以在这里进行异步请求，然后提交 mutations 改变状态
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    },
    fetchUser({ commit }) {
      // 模拟异步请求
      setTimeout(() => {
        const user = { name: 'John Doe', age: 30 };
        commit('setUser', user);
      }, 1000);
    }
  },

  // 派生状态，用于计算基于状态的值
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
    isLoggedIn(state) {
      return !!state.user;
    }
  }
});

export default store;

五个核心概念

State、 Getter、Mutation 、Action、 Module

  • state => 基本数据(数据源存放地)
  • getters => 从基本数据派生出来的数据
  • mutations => 提交更改数据的方法，同步
  • actions => 像一个装饰器，包裹mutations，使之可以异步。
  • modules => 模块化Vuex

state

State 是 Vuex 存储的单一源。你可以在 store 中定义应用程序的所有状态，然后在组件中访问和使用这些状态。上面 store 我们就定义了两个状态 count 和 user。

getters

Getters 类似于组件的计算属性（computed properties）。它们用于派生一些状态或进行一些状态的计算，返回新的结果。Getters 接受 state 作为其第一个参数。

const store = createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

在组件中使用 getters：

computed: {
  doubleCount() {
    return this.$store.getters.doubleCount;
  }
}

mutations

Mutations 是唯一能够修改 Vuex state 的方法。每个 mutation 都有一个类型 (type) 和一个回调函数 (handler)。回调函数接收 state 作为第一个参数，可以直接改变 state。mutations 必须是同步函数。

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  }
});

在组件中提交 mutation：

methods: {
  increment() {
    this.$store.commit('increment');
  },
  decrement() {
    this.$store.commit('decrement');
  }
}

actions

Actions 类似于 mutations，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

在组件中分发 action：

methods: {
  incrementAsync() {
    this.$store.dispatch('incrementAsync');
  }
}

modules

在大型应用中，单一的 state 对象会变得臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutations、actions 和 getters，甚至可以嵌套子模块。

const moduleA = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

const store = createStore({
  modules: {
    a: moduleA
  }
});

在组件中访问模块状态：

computed: {
  count() {
    return this.$store.state.a.count;
  },
  doubleCount() {
    return this.$store.getters['a/doubleCount'];
  }
}

总结

在选择状态管理库时，Vuex 和 Pinia 是两个常见的选项。而对于我来说，我觉得 Pinia 更值得优先选择。对比下来，Pinia 比 Vuex 更简洁，在学习难度上 Pinia 也相对简单一些。Pinia 提供了更直观和现代的 API，更符合 Vue 3 的组合式 API 设计理念。它的开发体验更加愉快，支持热重载和插件系统，并与 Vue Devtools 完美集成。虽然 Vuex 有着广泛的社区支持和成熟的生态系统，但 Pinia 的快速增长和 Vue 核心团队的支持使其成为新的官方推荐状态管理库。因此，对于新的项目或者希望采用更现代化状态管理方式的项目，Pinia 是一个更好的选择。想简单了解一下Pinia可以来到我这篇文章简单了解一下你知道的状态管理库Pinia

avatar
文章
阅读
粉丝