vue3中使用vuex

在Vue 3中使用Vuex的基本步骤如下：

1. 安装Vuex：

npm install vuex@next --save

2. 创建一个Vuex store。在项目的src目录下创建一个store.js文件：

// store.js
import { createStore } from 'vuex';
 
export default createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {},
  modules: {}
});

3. 在Vue应用中引入并配置store。在main.js或main.ts文件中：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
 
const app = createApp(App);
 
app.use(store);
 
app.mount('#app');

4. 在组件中使用Vuex状态和操作。例如，在一个组件中：

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>
 
<script>
import { useStore } from 'vuex';
import { defineComponent } from 'vue';
 
export default defineComponent({
  setup() {
    const store = useStore();
    const count = computed(() => store.state.count);
 
    function increment() {
      store.commit('increment');
    }
 
    return { count, increment };
  },
});
</script>

以上代码展示了如何在Vue 3应用中设置和使用Vuex store。通过createStore创建store，使用computed响应式地获取状态，并通过store.commit调用mutation来更改状态。