vue3 usestore用法

Vue 3 的 `useStore` 是Vuex 4.x引入的一个新的 API，它简化了对状态管理的集成和使用。`useStore` 是一个响应式的 store 插件，让你可以在组件内部方便地获取和修改全局共享的状态。

以下是 `useStore` 的基本用法：

// 首先安装 Vuex 和 @vueuse 库
npm install vuex @vueuse

// 创建一个简单的 Vuex store
import { createStore } from 'vuex';
const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

// 使用 useStore 在组件中导入并使用 store
import { useStore } from '@vueuse';

export default {
  setup() {
    const store = useStore(store); // 传入创建好的 store 实例
    return () => {
      // 在模板中访问 store 中的数据和触发 mutation
      <div>
        Count: {{ store.state.count }}
        <button @click="store.commit('increment')">Increment</button>
      </div>
    };
  },
};

// 当然，你也可以在每个需要使用 store 的组件上显式地导入
import { useStore } from '@/store/store.js';