Vue Pinia 与 Vue Facing Decorator 的完美融合：告别“未捕获的引用错误”

vue.js

2024-03-24 15:14:59

在 Vue 中使用 Pinia 和 Vue Facing Decorator：解决“未捕获的引用错误”

简介

在 Vue 项目中结合使用 Vue Facing Decorator 和 Pinia 时，你可能会遇到“未捕获的引用错误：在初始化之前无法访问'useCoreStore'”。本指南将详细介绍如何正确设置和使用这些库来解决此错误。

设置 Vue Facing Decorator

按照 Vue Facing Decorator 官方文档中的步骤进行设置，包括安装依赖项和配置 webpack。

设置 Pinia

安装 Pinia 并创建你的 Pinia 存储：

npm install pinia

// store.js
import { defineStore } from "pinia";

export const useCoreStore = defineStore('core', {
  state: () => ({
    navCollapsed: false,
  }),
  getters: {},
  actions: {},
});

使用 Pinia 的 Vue Facing Decorator

在你的组件中，使用 useCoreStore 钩子获取 Pinia 存储：

import { useCoreStore } from '@/core';

@Component({
  setup() {
    const store = useCoreStore();
    return { store };
  },
  methods: {
    setNavCollapsed(collapsed) {
      store.navCollapsed = collapsed;
    }
  }
})
class AppHeader extends Vue {

使用 Pinia 动作

可以使用 mapActions 函数来使用 Pinia 动作：

import { mapActions } from "pinia";

@Component({
  setup() {
    const store = useCoreStore();
    return { store };
  },
  methods: {
    ...mapActions(store, [ "setNavCollapsed" ])
  }
})
class AppHeader extends Vue {

避免初始化错误

确保在组件 setup 函数中使用 useCoreStore 钩子之前先初始化 Pinia 存储。在你的 main.js 中：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

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