使用Vue3和pinia的问题

Question

我在使用pinia有问题，以前我在我的项目中使用了vuex，但是我想迁移到pinia来处理我的商店。所以我想，我把皮尼亚装好了。这样我就可以在没有问题的情况下运行我的应用程序的服务器。但是，当我打开页面(PS: vue dev工具不再被检测到)时，我得到了以下信息：

​

​

这是我的文件package.json：

​

{
  "name": "ecomm-challenge",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "core-js": "^3.6.5",
    "pinia": "^2.0.14",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-pinia": "~0.1.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

​

在这里您可以找到我的main.js文件：

​

import { createApp } from "vue";
import App from "./App.vue";
import { library } from "@fortawesome/fontawesome-svg-core";

import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
import { createPinia } from "pinia";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(faCartShopping);
const pinia = createPinia();
createApp(App)
  .use(pinia)
  .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app");

​

这是我的github，如果有人想检查代码：https://github.com/Elsong1120/Ecomm-challenge

感谢任何帮助我的人。

Answer 1

有类似的问题，这正是帮助我的：

第一，在存储文件夹\store\store.js wich中创建一个新文件，如下所示：

​

import { createPinia, setActivePinia } from "pinia";
const pinia = createPinia();
setActivePinia(pinia);
export default pinia;

​

第二，将皮尼亚(从\store\store.js出口)导入你的main.js

​

import { createApp } from 'vue';
import pinia from './stores/store.js';
import App from './App.vue';

const app = createApp(App);
app.use(pinia)

app.mount('#app');

​