Vuex在Vue 3 Setup中如何使用？

提问者：Terry2025.04.22浏览：131

Vuex呢，就是Vue.js应用程序开发的状态管理模式和库哦，它可以帮助我们在Vue组件之间方便地共享和管理状态呢，比如说，当我们有一些数据需要在多个不同的组件里都能访问到，而且这些组件对这些数据的操作还可能相互影响，这时候Vuex就超级有用啦，它能让我们的代码更有条理,数据的流动和变更也能更加清晰可追踪哦。

那Vue 3里的Setup函数又是咋回事呢？

在Vue 3中呀，Setup函数可是个很重要的新特性呢，它是组件内部用来创建响应式数据、计算属性、方法等等的地方哦，通过这个Setup函数，我们可以更方便地使用Vue 3的一些新特性，像是组合式API啦，以前在Vue 2里，我们可能更多是用Options API，现在有了Setup函数，我们写起代码来可以更加灵活，把相关的逻辑都放在一起,让代码的可维护性变得更好呢。

好啦，重点来啦，Vuex在Vue 3 Setup中具体怎么用呢？

安装Vuex 首先呢，得确保已经安装了Vuex哦，如果是新建项目，一般可以在创建项目的时候就选择包含Vuex，要是已经有现成的项目，那就通过命令行安装一下，比如用npm install vuex --save这样的命令来安装啦。
创建Vuex Store实例安装好之后呢，我们要创建一个Vuex的Store实例呀，在一个单独的文件里（比如store.js）,我们可以这样写哦：

import { createStore } from 'vuex';
const store = createStore({
  state () {
    return {
      count: 0
    };
  },
  mutations: {
    increment (state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});
export default store;

这里我们定义了一个简单的状态count，还有一个修改这个状态的mutation叫increment,以及一个异步的action叫incrementAsync哦。

在组件中使用Vuex Store 接下来就是在Vue 3的组件里通过Setup函数来使用这个Store啦，假设我们有个组件叫MyComponent.vue,里面可以这样写哦：

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">加一</button>
    <button @click="incrementAsync">异步加一（1秒后）</button>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
  setup () {
    const store = useStore();
    const count = computed(() => store.state.count);
    const increment = () => {
      store.commit('increment');
    };
    const incrementAsync = () => {
      store.dispatch('incrementAsync');
    };
    return {
      count,
      increment,
      incrementAsync
    };
  }
});
</script>

在Setup函数里呀，我们先用useStore这个函数从Vuex里获取到了Store实例哦，然后呢，我们通过computed函数把store里的状态count变成一个响应式的数据，这样在模板里就能方便地使用啦，对于修改状态的操作，像点击按钮增加计数，我们就通过store.commit去调用mutation里的方法，要是异步操作呢，就用store.dispatch去调用action里的方法哦。

使用Vuex在Vue 3 Setup中有啥要注意的地方呀？

响应式数据处理要特别注意响应式数据的处理哦，就像我们上面通过computed函数来让从Vuex获取到的状态变成响应式的，这样当状态变化的时候，组件里相关的地方才能自动更新呢，要是没处理好响应式,可能就会出现数据更新了但界面没跟着变的情况哦。
正确调用mutation和action 一定要按照Vuex的规则来正确调用mutation和action呀，mutation是用来同步修改状态的，而且只能在mutation里直接修改状态哦，action呢，一般是用来处理异步操作的，然后在action里通过commit去调用mutation来最终修改状态，可别搞混啦,不然数据的流向和状态的管理就会乱套咯。
组件的复用性在使用Vuex的时候，也要考虑组件的复用性哦，有时候我们可能会在不同的场景下复用一个组件，那这个组件对Vuex的使用方式得设计得合理，不能让它太依赖于某个特定的Vuex状态或者操作,这样才能保证组件在不同的地方都能很好地工作呢。

好啦，这就是Vuex在Vue 3 Setup中的基本使用方法和一些要注意的地方啦，希望能帮助到你在Vue 3项目里更好地管理状态哦！

赏您的支持是我们创作的动力！