js 中怎样调用 vuex

### 如何在 JavaScript 中使用 Vuex 进行状态管理 #### 导入 Store 并挂载到 Vue 实例上 为了使整个应用程序能够访问 Vuex 的 store，在 `main.js` 文件中导入并配置 store 是常见的做法。这一步骤确保了所有的组件都可以通过 this.$store 访问到全局的状态对象。 ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; import store from './store'; // 导入 store 模块 Vue.config.productionTip = false; Vue.prototype.$store = store; // 将 store 注册为 Vue 原型上的属性以便于全局访问 new Vue({ render: h => h(App), store, // 把创建好的 store 提供给 vue 实例 }).$mount('#app'); ``` [^1] #### 在脚本文件中使用 Vuex 存取数据 当需要在一个普通的 .js 文件里操作 Vuex state 或者触发 actions 时，可以通过如下方式来实现： ```javascript // example.js import store from '../store'; const token = store.state.user.token; console.log(token); function logout() { store.dispatch('user/logout'); // 调用 action 来执行异步逻辑或修改状态 } logout(); ``` [^2] #### 组件内部获取 State 和 Getters 对于 Vue 单文件组件来说，可以直接利用计算属性 computed 属性映射 state 及 getters 到局部变量，从而简化模板中的表达式书写；也可以直接在 template 内部使用 `$store` 对象读写状态。 ```html <!-- App.vue --> <template> <div id="app"> {{ $store.state.title }} <!-- 直接访问 title 状态 --> {{ count }} </div> </template> <script> export default { name: "App", computed: { count() { return this.$store.getters.getCount } // 映射 getter 方法 } }; </script> ``` [^3] #### 处理 Nuxt.js 特殊情况下的 Vuex 使用问题 如果是在 Nuxt.js 项目环境下遇到无法跨模块调用 mutations 的情形，则可能是因为 nuxt 默认情况下不会自动注册根级别的命名空间。此时可以在定义 mutation/action 时指定 `{ root: true }` 参数以允许其作用域扩展至顶层 namespace 下的所有子模块内。 ```javascript // plugins/store.actions.js export const actions = { someAction(context, payload) { context.commit('someMutation', payload, { root: true }); }, }; ``` [^4]