[教程]Vue3 VueX快速上手：从零开始搭建你的第一个项目

引言随着Vue3的发布，前端开发社区对其响应迅速，VueX作为Vue的官方状态管理库，也迎来了更新。本文将带你从零开始，使用Vue3和VueX搭建你的第一个项目，帮助你快速上手这两个强大的工具。准备工...

引言

随着Vue3的发布，前端开发社区对其响应迅速，VueX作为Vue的官方状态管理库，也迎来了更新。本文将带你从零开始，使用Vue3和VueX搭建你的第一个项目，帮助你快速上手这两个强大的工具。

准备工作

在开始之前，请确保你的开发环境已经准备好：

1. Node.js和npm：用于安装Vue CLI。
2. Vue CLI：用于快速搭建Vue项目。

你可以通过以下命令安装Vue CLI：

npm install -g @vue/cli

创建Vue3项目

使用Vue CLI创建一个新的Vue3项目：

vue create my-vue3-project

选择默认配置或手动选择配置项。等待项目创建完成后，进入项目目录：

cd my-vue3-project

安装VueX

在项目中安装VueX：

npm install vuex@next --save

配置VueX

在项目根目录下创建一个名为store的文件夹，并在其中创建一个名为index.js的文件：

// store/index.js
import { createStore } from 'vuex';
export default createStore({ state() { return { count: 0, }; }, mutations: { increment(state) { state.count++; }, }, actions: { increment({ commit }) { commit('increment'); }, }, getters: { doubleCount(state) { return state.count * 2; }, },
});

在Vue组件中使用VueX

在你的组件中，你可以通过useStore函数来访问VueX的store：

// components/Counter.vue
<template> <div> <h1>Count: {{ count }}</h1> <button @click="increment">Increment</button> </div>
</template>
<script>
import { useStore } from 'vuex';
export default { setup() { const store = useStore(); const increment = () => { store.dispatch('increment'); }; return { count: store.state.count, increment, }; },
};
</script>

运行项目

现在，你可以运行你的Vue3项目了：

npm run serve

在浏览器中打开http://localhost:8080/，你应该能看到一个计数器组件，点击按钮后计数会增加。

总结

通过本文，你学习了如何使用Vue3和VueX搭建你的第一个项目。现在，你可以开始探索VueX的更多高级特性，并逐步构建你的前端应用。祝你学习愉快！