vue3中store仓库的用法

在 Vue 3 中，你可以使用 Vuex 作为 store 管理仓库。以下是 Vuex 在 Vue 3 中的基本用法：

1. 安装 Vuex

在项目目录中，使用以下命令安装 Vuex：

npm install vuex@next

2. 创建 store 仓库

在项目目录中，创建一个名为 `store.js` 的文件，并编写以下代码：

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

在上面的代码中，我们首先导入了 `createStore` 函数，并使用它创建了一个 store 对象。`state` 函数返回了一个包含 `count` 属性的对象。`mutations` 对象包含了一个 `increment` 方法，用于增加 `count` 的值。

3. 在 Vue 应用中使用 store

在 Vue 应用的入口文件中，导入 `store.js` 并将其作为一个选项传递给 `createApp` 函数：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App)
  .use(store)
  .mount('#app')

在上面的代码中，我们先导入了 `store.js`，然后将其作为一个插件使用了 `use` 方法，最后将应用挂载到了 `#app` 元素上。

4. 在组件中使用 store

在组件中，我们可以通过 `useStore` 函数获取到 store 对象，并通过 `computed` 属性将其绑定到组件的模板中：

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

<script>
import { useStore } from 'vuex'

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

    function incrementCount() {
      store.commit('increment')
    }

    return {
      count,
      incrementCount
    }
  }
}
</script>

在上面的代码中，我们首先导入了 `useStore` 函数，并通过它获取到了 store 对象。然后，我们使用 `computed` 属性将 `count` 属性绑定到了模板中。最后，我们在 `incrementCount` 方法中使用 `store.commit` 方法调用了 `increment` 方法来增加 `count` 的值。

这就是在 Vue 3 中使用 Vuex 管理 store 仓库的基本流程。