vuex简单使用

### Vuex 使用方法概述 Vuex 是 Vue.js 的官方状态管理库，旨在帮助开发者更高效地管理和维护应用中的全局状态[^1]。 #### 创建并初始化 Vuex Store 为了使用 Vuex 进行状态管理，在项目中需先创建一个 `store` 实例： ```javascript import { createStore } from 'vuex' const store = createStore({ state () { return { count: 0, } }, mutations: { increment (state) { state.count++ } }, actions: { increment ({ commit }) { commit('increment') } } }) ``` 这段代码定义了一个简单的计数器逻辑，其中包含了初始状态、改变状态的方法(mutations)，以及触发这些变化的动作(actions)[^2]。 #### 安装 Vuex 插件到 Vue 应用程序 为了让整个应用程序能够访问这个 `store` ，需要通过 `Vue.use()` 方法安装 Vuex 并将其挂载至根实例: ```javascript import { createApp } from 'vue' import App from './App.vue' import store from './store' // 假设上面的 store 配置保存在一个单独文件里 createApp(App).use(store).mount('#app') ``` 这里展示了如何利用 `createApp().use()` 来注册 Vuex 插件，并传入之前创建好的 `store` 对象[^3]。 #### 组件内获取 State 和 Dispatch Actions 一旦完成了上述设置工作，则可以在任何组件内部轻松读取共享的状态数据或分发动作来更新它们。例如： ```html <template> <div class="counter"> {{ $store.state.count }} <button @click="$store.dispatch('increment')">Increment</button> </div> </template> <script setup> // 如果是在组合式 API 中可以直接解构 useStore hook 获取 store 实例 import { useStore } from "vuex"; let store = useStore(); console.log(store.getters.someGetter); </script> ``` 此模板片段显示了怎样在视图层展示来自 Vuex 存储的数据(`$store.state`)，并通过按钮点击事件调用 action (`dispatch`) 更新该数值[^4]。