Vue 3.0 中如用Vuex·yarn·安装 Vuex 依赖首先你得安装 Vuex

作者：机器人技术佬 | 发布时间：2025-06-20 |

Vue 3.0 中如何使用 Vuex？

一、安装 Vuex 依赖

首先，你得安装 Vuex。用 npm 或 yarn 来安装最新版本的 Vuex，因为它是为 Vue 3.0 设计的。

npm install vuex@next --save



 或者



yarn add vuex@next

二、创建 Vuex Store

创建一个 Vuex Store，里面会包含应用的状态、变更状态的方法、异步操作和计算属性。在项目根目录下创建一个 store 文件夹，并在其中创建一个 index.js 文件。

// store/index.js



import { createStore } from 'vuex';







export default createStore({



  state() {



    return {



      count: 0



    };



  },



  mutations: {



    increment(state) {



      state.count++;



    }



  },



  actions: {



    incrementAsync({ commit }, number) {



      setTimeout(() => {



        commit('increment', number);



      }, 1000);



    }



  },



  getters: {



    doubleCount(state) {



      return state.count  2;



    }



  }



});

三、在 Vue 应用中注册 Vuex

在 Vue 应用的入口文件（通常是 main.js）中导入并注册 Store。

// main.js



import { createApp } from 'vue';



import App from './App.vue';



import store from './store';







const app = createApp(App);



app.use(store);



app.mount('app');

四、在组件中使用 Vuex 状态

在 Vue 组件中，你可以通过 mapState、mapGetters、mapActions 和 mapMutations 等辅助函数来简化代码。

// MyComponent.vue

五、Vuex 的核心概念

Vuex 是一个专门为 Vue.js 应用设计的状态管理模式，它让组件的状态集中管理，确保状态变化可预测。

概念	描述
State	存储应用的状态数据，如用户信息、商品列表等。
Mutations	同步变更状态的方法，只有通过 mutations 才能修改 state。
Actions	用于处理异步操作，并提交 mutations 以变更状态。
Getters	类似于 Vue 的计算属性，用于从 state 派生出一些状态。

六、实例说明与实践

以一个电商应用为例，我们可以使用 Vuex 来集中管理购物车数据，并通过 actions 来处理添加商品、删除商品等异步操作。

// store/modules/cart.js



export default {



  namespaced: true,



  state() {



    return {



      items: []



    };



  },



  mutations: {



    addItem(state, item) {



      state.items.push(item);



    },



    removeItem(state, item) {



      const index = state.items.indexOf(item);



      if (index !== -1) {



        state.items.splice(index, 1);



      }



    }



  },



  actions: {



    addItem({ commit }, item) {



      commit('addItem', item);



    },



    removeItem({ commit }, item) {



      commit('removeItem', item);



    }



  }



};

// main.js



import { createApp } from 'vue';



import App from './App.vue';



import store from './store';







const app = createApp(App);



app.use(store);



app.mount('app');

使用 Vuex 管理 Vue 3.0 应用的状态，可以确保状态管理的集中化和可预测性。通过模块化的方式，可以更好地组织和管理大型应用的状态。合理划分模块，明确每个模块的职责，确保代码的可维护性和可扩展性。

FAQs

Q: Vue3.0中如何使用Vuex？

A: 在Vue3.0中，使用Vuex仍然是非常简单的。以下是一些基本步骤：

安装 Vuex：使用 npm 或 yarn 安装最新版本的 Vuex。
创建 Vuex Store：在项目的根目录中创建一个名为 store.js 的文件，并配置 Vuex Store。
在 Vue 应用中使用 Vuex：在 Vue 应用的入口文件中导入 Vuex Store，并将其作为插件使用。
在组件中使用 Vuex：现在，你可以在组件中使用 Vuex Store了。通过访问 Store 中的状态和变更来管理状态。