如何正确使用Vue3 + pinia +类型记录上的Pinia商店

Question

我挣扎于使用带有类型记录的Pinia商店和使用basic app.vue Vuejs3 option中的存储库。

我有这个app.js文件

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

import App from './App';
const pinia = createPinia()

const app = createApp(App);

app.use(pinia);

app.mount('#app');

这个app.vue

<script>
import {useAuthStore} from "@app/store/auth.store";
import {useCountryStore} from "@app/store/country.store";

export default {
  components: {SidebarMenu},
  setup() {
    return {
      authStore: useAuthStore(),
      countryStore: useCountryStore(),
    }
  },
  computed: {
    loggedIn: function () {
      return this.authStore.status.loggedIn;
    }
  }
}
</script>

这个authStore.js：

import {defineStore} from "pinia";

const user = JSON.parse(localStorage.getItem('user'));

export const useAuthStore = defineStore("auth", {
    state: () => (
        user ? {status: {loggedIn: true}, user}  : {status: {loggedIn: false}, user: null}
    ),
});

而这个CountryStore.ts

import { defineStore } from "pinia";
import { Country } from "@app/interfaces/country";

export type CountryState = {
    countries: Country[],
    errors: any[],
}

export const useCountryStore = defineStore("country", {
    state: () => ({
        countries: [],
        errors: []
    } as CountryState)
})

在我的例子中，无论我做什么，我得到这个错误是因为countryStore，而不是AuthStore：

getActivePinia was called with no active Pinia. Did you forget to install pinia?

但不管出于什么原因。如果我将我的countryStore.ts转换为.js (当然还删除类型提示)，它就能工作了！

我找了很多关于为什么会这样，我错过了什么，或者我做错了什么。

当然，我想最后保持打字稿，但我不知道如何使它发挥作用。

感谢任何能帮我的人。爱你们所有人。

Answer 1

尝试给defineStore一个名称作为第一个参数，然后将options对象作为第二个参数。就像你在你的authStore上做的一样。

发自：

export const useCountryStore = defineStore( {
    id: "country",
    state: () => ({
        countries: [],
        errors: []
    } as CountryState)
})

至：

export const useCountryStore = defineStore("country", {
    id: "country",
    state: () => ({
        countries: [],
        errors: []
    } as CountryState)
})

Answer 2

所以，我自己想出了办法，尝试多种方法。皮尼亚没什么问题。

我的主要问题是，我在没有打字本的情况下开始了这个项目，并在“某个文件”之后开始实现它。

如果要启用类型记录，请在 .js文件中在.ts中切换

这不是.vue所需要的

下面列出了我为使一切正常运转所做的各种工作：

使用此tsconfig：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": "./assets", //this is your working folder, usually ./ only, since i'm using webpack encore + symfony i adapted it
    "types": [
      "webpack-env"
    ],
    "paths": { // very important to make your import @app work
      "@app/*": [
        "*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "assets/**/*.ts",
    "assets/**/*.tsx",
    "assets/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

在您的主文件夹中添加shims-vue.d.ts (/assets给我)，我仍然不知道为什么需要这样做，但它拯救了我

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}

创建组件时不要忘记这一点

<script lang="ts">

别忘了把你的main.js或app.js变成.ts，并调整webpack.config.js安可

.addEntry('app', './assets/app.ts')
.addAliases({
     '@app': path.resolve(__dirname, 'assets/') //usefull for @app/ in import, you can also only use @, adapt it on your desire
})

在此之后，您将在代码中得到与要修改的内容相关的大量编译错误。

一个诀窍是.vue文件不会被导入并抛出“模块未找到”。

例如，我不得不从：

import App from './App';

致：

import App from './App.vue';

如果每个人都有更好的练习，请随意分享，我会调整我的答案。