Vue.js 如何在Vue setup()方法中访问Vuex store

在本文中，我们将介绍如何在Vue的setup()方法中访问Vuex store。Vuex是Vue.js的状态管理库，可以帮助我们管理应用程序的状态。

什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。Vuex的核心概念包括state、mutations、actions和getters。

在Vue实例中使用Vuex

在Vue实例中使用Vuex非常简单。我们可以通过在Vue的createApp()方法中传递一个store选项来将Vuex store与Vue实例关联起来。例如：

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

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

在组件中使用Vuex store非常简单，我们可以在组件的template中使用{{ $store.state.xxx }}来获取store中的数据。其中，$store是Vuex在Vue实例中的默认属性。例如：

<template>
  <div>
    <p>{{  $store.state.count }}</p> <button @click="$ store.commit('increment')">Increment</button>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

在Vue setup()方法中访问Vuex store

在Vue 3中，setup()方法是一个新的组件选项，它能够在组件渲染之前执行一些代码。我们可以在setup()方法中访问Vuex store，以便在组件中获取和修改store中的数据。

首先，我们需要在setup()方法中使用Vue提供的useStore()函数来获取到Vuex store的实例。然后，我们可以通过store.state来获取store中的数据，通过store.commit()来提交mutation来修改store中的数据。例如：

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

<script>
import { useStore } from 'vuex'

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

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

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

在上面的例子中，我们使用useStore()函数来获取store实例，并使用computed()函数来创建一个响应式的computed属性count，这样当store中的count发生变化时，页面上的数据也会相应更新。我们还定义了一个名为increment()的方法，用于提交mutation来修改store中的count。