Vue3 Setup中如何使用Vuex？

首先要安装Vuex并在项目中引入哦

问：在Vue3项目里想用Vuex，第一步得干啥呀？ 答：那肯定得先安装Vuex啦，如果你的项目是用Vue CLI创建的，那可以在命令行里通过 npm install vuex@next --save 或者 yarn add vuex@next 来安装Vuex的Vue3版本哦（这里的 @next 就是针对Vue3适配的啦），安装好之后呢，就在你的项目的入口文件（一般是 main.js 或者 main.ts）里引入它并且创建一个Vuex的store实例呀。

比如说在 main.js 里,代码可能是这样的：

import { createApp } from 'vue';
import App from './App.vue';
import { createStore } from 'vuex';
// 创建一个新的store实例
const store = createStore({
  state () {
    return {
      count: 0
    };
  },
  mutations: {
    increment (state) {
      state.count++;
    }
  }
});
const app = createApp(App);
// 把store实例挂载到应用上
app.use(store);
app.mount('#app');

这里就简单创建了一个有个 count 状态和一个 increment 突变的Vuex store啦，然后通过 app.use(store) 把它挂载到了Vue应用上哦。

在setup函数里怎么获取Vuex的状态呢？

问：我在Vue3的setup函数里面，咋拿到Vuex里存的那些数据呀？ 答：在setup函数里获取Vuex的状态可以用 toRefs 和 storeToRefs 这俩好帮手哦。

先从Vuex里把store给导入进来呀，就像在组件里导入其他东西一样，假设我们上面创建的那个store在 store/index.js 文件里,那在组件里可以这么导入：

import { useStore } from 'vuex';
import { toRefs, reactive } from 'vue';
export default {
  setup () {
    const store = useStore();
    // 通过storeToRefs把store里的状态转成响应式的ref对象
    const { count } = toRefs(storeToRefs(store.state));
    return {
      count
    };
  }
};

这里先用 useStore 获取到了Vuex的store实例，然后通过 storeToRefs 和 toRefs 的配合，就把 store.state 里的 count 状态转成了可以在setup函数里方便使用的响应式的 ref 对象啦，这样在模板里就可以直接用 {{ count }} 来显示这个状态的值咯，而且一旦这个状态在Vuex里变了,模板里显示的值也会跟着变呢。

那在setup函数里怎么调用Vuex的 mutations呢？

问：我想在setup函数里改变Vuex里的数据，咋调用那些mutations呀？ 答：调用Vuex的mutations在setup函数里也不难哦，还是先把store导入进来,然后就可以直接通过store实例去调用mutations啦。

比如说还是上面那个有 increment 突变的store，在组件的setup函数里可以这样来调用这个突变去增加 count 的值：

import { useStore } from 'vuex';
export default {
  setup () {
    const store = useStore();
    const incrementCount = () => {
      store.commit('increment');
    };
    return {
      incrementCount
    };
  }
};

这里定义了一个 incrementCount 函数，在这个函数里通过 store.commit('increment') 就调用了Vuex store里的 increment 突变，这样就能改变 store.state.count 的值啦，然后在模板里可以给个按钮绑定这个 incrementCount 函数，<button @click="incrementCount">增加计数</button>,点击按钮就会触发这个突变改变数据咯。

在setup函数里使用Vuex的actions呢？

问：Vuex里还有actions呀，在setup函数里咋用它们呢？ 答：没错，Vuex的actions也很有用呢,在setup函数里使用actions的步骤和调用mutations有点类似哦。

同样先导入store，然后就可以通过store实例去调用actions啦,假设我们在store里定义了一个这样的action：

actions: {
  async incrementAsync (context) {
    setTimeout(() => {
      context.commit('increment');
    }, 1000);
  }
}

这个action就是过一秒钟后再去调用 increment 突变来增加 count 的值,在组件的setup函数里可以这样调用这个action：

import { useStore } from 'vuex';
export default {
  setup () {
    const store = useStore();
    const incrementCountAsync = () => {
      store.dispatch('incrementAsync');
    };
    return {
      incrementCountAsync
    };
  }
};

这里定义了 incrementCountAsync 函数，通过 store.dispatch('incrementAsync') 就调用了那个 incrementAsync 的action啦，然后在模板里也可以给个按钮绑定这个函数，<button @click="incrementCountAsync">异步增加计数</button>,点击按钮就会触发这个action去执行相应的操作咯。

通过以上这些步骤，在Vue3的setup函数里就能很好地使用Vuex来管理应用的状态啦,是不是还挺方便的呀？