如何在Vue的setup()方法中访问Vuex store？

setup函数在组件实例创建之前执行，内部没有指向组件实例的this，因此无法直接使用this.$store访问挂载的Vuex实例，你可以通过Vuex提供的useStore组合式API获取store实例：

• 第一步：从vuex包中导入useStore方法

import { useStore } from 'vuex'

• 第二步：在setup内调用useStore()得到store实例，即可正常操作state、触发mutation/action：

// 选项式API搭配setup写法
export default {
  setup() {
    const store = useStore()
    // 访问state示例（建议用computed包裹保证响应性）
    const pageTitle = computed(() => store.state.app.title)
    // 触发mutation示例
    const setTitle = (title) => store.commit('app/setTitle', title)
    // 触发action示例
    const initAppConfig = () => store.dispatch('app/initConfig')

    return {
      pageTitle,
      setTitle,
      initAppConfig
    }
  }
}

如果使用<script setup>语法糖，写法更简洁：

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'

const store = useStore()
const pageTitle = computed(() => store.state.app.title)

const updateTitle = (newTitle) => {
  store.commit('app/setTitle', newTitle)
}
</script>

提示：如果项目使用TypeScript，你可以为useStore自定义类型推导，避免store默认为any类型的问题

内容的提问来源于stack exchange，提问作者marcuse