Loading... # 介绍 Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它允许您集中存储和管理应用程序的所有组件的状态。Vuex 的核心概念是“store”，它类似于一个全局状态树，所有组件都可以从中获取数据。Vuex 中有五个核心属性： 1. State：存储应用程序的所有状态（即数据），类似于组件中的 data 属性。可以通过 store.state 来访问。 2. Getters：允许您从 store 中派生出一些状态，类似于组件中的计算属性。可以通过 store.getters 来访问。 3. Mutations：是改变 store 中状态的唯一途径，类似于事件。必须是同步函数。可以通过 store.commit 来触发。 4. Actions：类似于 Mutations，但可以包含异步操作。可以通过 store.dispatch 来触发。 5. Modules：允许将 store 分割成多个小的 store，每个小的 store 可以拥有自己的 state、getters、mutations 和 actions。 使用 Vuex 首先需要在 Vue 项目中引入 Vuex 库，然后创建一个 store 实例，将其传递给根 Vue 实例。在组件中，可以通过访问 this.$store 来访问 store 实例中的 state、getters、mutations 和 actions。下面是一个示例： ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { doubleCount (state) { return state.count * 2 } } }) new Vue({ store, el: '#app', computed: { count () { return this.$store.state.count }, doubleCount () { return this.$store.getters.doubleCount } }, methods: { increment () { this.$store.commit('increment') }, incrementAsync () { this.$store.dispatch('incrementAsync') } } }) ``` 在上面的示例中，我们定义了一个包含 count 属性的 state 对象，一个包含 increment 方法的 mutations 对象，一个包含 incrementAsync 方法的 actions 对象，一个包含 doubleCount 方法的 getters 对象。然后在根 Vue 实例中，我们将 store 实例传递给了 Vue 的 store 选项，这样在整个应用中都可以访问 store 实例。在组件中，我们通过 this.$store 访问了 store 实例中的各种属性和方法。 **下面我将详细介绍一下 Vuex 的五个核心属性及其使用方法。** # State State 是 Vuex 存储数据的地方，它类似于组件中的 data 属性，但不同的是，所有组件都可以从 state 中获取数据，而不需要通过 props 属性传递数据。State 中的数据是响应式的，当 state 中的数据发生改变时，所有依赖于该数据的组件都会自动更新。下面是一个示例： ```javascript const store = new Vuex.Store({ state: { count: 0 } }) // 在组件中访问 state this.$store.state.count ``` # Getters Getters 允许我们从 store 中派生出一些状态，类似于组件中的计算属性。Getters 可以看作是 state 的计算属性，当 state 中的数据发生改变时，所有依赖于该数据的 getters 也会自动更新。Getters 可以接收其他 getters 作为第二个参数，也可以接收 state 作为第一个参数。下面是一个示例： ```javascript const store = new Vuex.Store({ state: { count: 0 }, getters: { doubleCount (state) { return state.count * 2 }, tripleCount (state, getters) { return getters.doubleCount + state.count } } }) // 在组件中访问 getters this.$store.getters.doubleCount this.$store.getters.tripleCount ``` # Mutations Mutations 是改变 store 中状态的唯一途径，类似于事件。Mutations 必须是同步函数，用于修改 state 中的数据。当使用 mutations 修改 state 中的数据时，必须使用 commit 方法触发 mutations。下面是一个示例： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) // 在组件中触发 mutations this.$store.commit('increment') ``` # Actions Actions 类似于 Mutations，但可以包含异步操作。Actions 用于提交 mutations，而不是直接修改 state 中的数据。当使用 actions 提交 mutations 时，必须使用 dispatch 方法触发 actions。下面是一个示例： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } }) // 在组件中触发 actions this.$store.dispatch('incrementAsync') ``` # Modules Modules 允许将 store 分割成多个小的 store，每个小的 store 可以拥有自己的 state、getters、mutations 和 actions。Modules 可以嵌套，允许我们在大的 store 中管理多个小的 store。下面是一个示例： ```javascript // 定义 cart module const cart = { state: { items: [] }, mutations: { addToCart (state, payload) { state.items.push(payload) } }, actions: { addToCart ({ commit }, payload) { commit('addToCart', payload) } }, getters: { cartItemsCount (state) { return state.items.length } } } // 定义 store const store = new Vuex.Store({ modules: { cart } }) // 在组件中访问 cart module this.$store.state.cart.items this.$store.getters['cart/cartItemsCount'] this.$store.dispatch('cart/addToCart', payload) ``` 在上面的示例中，我们首先定义了一个 cart module，包含了 state、mutations、actions 和 getters。接着在定义 store 时，将 cart module 注册到了 store 中。最后，在组件中访问 cart module 时，需要使用命名空间的方式，即在 getters 和 actions 的名称前添加模块名，以避免命名冲突。 希望这些内容能够帮助你更好地了解 Vuex 的五个核心属性及其使用方法。 # 相关文章 <a class="post_link" href="https://www.xxhzm.cn/archives/787/"><i data-feather="file-text"></i>vue3中vuex对比pinia</a> <a class="post_link" href="https://www.xxhzm.cn/archives/786/"><i data-feather="file-text"></i>Vue3使用Pinia</a> <a class="post_link" href="https://www.xxhzm.cn/archives/785/"><i data-feather="file-text"></i>vue状态管理详解以及在vue3中使用vuex</a> 猜你想看 JS图片轮播 PHP字符串常用函数 给你的博客添加每日60秒读懂世界 免费获取亚马逊国外云桌面的保姆级流程 给网站更换HarmonySanc字体 8月13日JS学习笔记 handsome美化-持续更新 Vue Router 中全局守卫和组件守卫的使用方式及示例 每日一学：PHP 中的array_count_values函数详解 Vue Router 的多个路由定义和使用方法详解 最后修改：2023 年 05 月 01 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
