Vue 3.0中使用的简单指南·命令行·相关问答FAQsQ 什么是Vue3.0 Vuex

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

Vue 3.0中使用Vuex的简单指南

一、安装Vuex

首先，你需要在你的Vue 3.0项目中安装Vuex。你可以通过npm或yarn来安装它：

命令行	说明
npm install vuex	使用npm安装Vuex
yarn add vuex	使用yarn安装Vuex

二、创建store

安装完成后，创建一个Vuex store。通常，你会在项目的`src`目录下创建一个`store`文件夹，并在其中创建一个`index.js`文件：

import { createStore } from 'vuex';





export default createStore({


  state() {


    return {


      // 初始状态


    };


  },


  mutations: {


    // 同步修改状态


  },


  actions: {


    // 异步操作


  },


  getters: {


    // 获取计算属性


  }


});

三、在Vue应用中使用store

接下来，你需要在Vue应用的入口文件中引入并使用这个store。通常，你会在`src`目录下的`main.js`文件中进行如下配置：

import { createApp } from 'vue';


import App from './App.vue';


import store from './store'; // 引入store





const app = createApp(App);


app.use(store); // 使用store


app.mount('app');

四、在组件中使用store

在Vue 3.0中，你可以通过组合API或选项API来使用Vuex store。

1、使用组合API

组合API允许你在`setup`函数中使用store：

import { useStore } from 'vuex';





export default {


  setup() {


    const store = useStore();


    // 使用store


  }


};

2、使用选项API

如果你更喜欢使用选项API，你可以使用`this.$store`来访问store：

export default {


  methods: {


    someMethod() {


      this.$store.dispatch('someAction');


    }


  }


};

五、模块化store

在大型应用中，你可能需要将store分成多个模块。Vuex允许你将state、mutations、actions和getters分割到单独的模块中。以下是如何创建和使用模块化store的示例：

import { createStore } from 'vuex';





const moduleA = {


  state() {


    return {


      // ...


    };


  },


  mutations: {


    // ...


  },


  actions: {


    // ...


  },


  getters: {


    // ...


  }


};





const store = createStore({


  modules: {


    moduleA


  }


});

六、持久化store

在某些情况下，你可能希望在页面刷新后保持store的状态。你可以使用第三方插件如`vuex-persistedstate`来实现这一点：

import createPersistedState from 'vuex-persistedstate';





const store = createStore({


  plugins: [createPersistedState()]


});

七、测试Vuex store

为了确保你的store逻辑是正确的，可以编写单元测试。以下是使用Jest进行简单测试的示例：

import { createStore } from 'vuex';


import { moduleA } from './store';





describe('store', () => {


  it('should handle moduleA state', () => {


    const store = createStore({


      modules: {


        moduleA


      }


    });





    // 模拟状态


    store.state.moduleA.someState = 'test';





    // 断言


    expect(store.state.moduleA.someState).toBe('test');


  });


});

在Vue 3.0中使用Vuex主要包括安装Vuex、创建store、在Vue应用中使用store、在组件中使用store、模块化store、持久化store以及测试store。这些步骤和实践能够帮助你在Vue 3.0项目中更好地管理全局状态。