vue3的store使用

Vue 3中的store通常指的是Vue的状态管理解决方案，Vue 3推荐使用`@vue/composition-api`提供的`ref`和`reactive`等函数来创建响应式数据，从而实现状态管理。在Vue 3中，虽然没有内置的状态管理库，但可以使用Vuex 4.x版本，该版本是专门为Vue 3设计的。以下是如何在Vue 3项目中使用Vuex store的基本步骤：

1. 安装Vuex：

npm install vuex@next

2. 创建store：

import { createStore } from 'vuex';

// 创建一个新的store实例
export const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

3. 在Vue应用中使用store：

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');

4. 在组件中使用store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const count = computed(() => store.state.count);

    function increment() {
      store.dispatch('increment');
    }

    return {
      count,
      increment
    };
  }
};
</script>