vue2项目使用pinia

pinia

pinia官网：https://pinia.web3doc.top/

安装

yarn add pinia
# 或者使用 npm
npm install pinia

vue2项目使用

main.js文件

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// import store from "./store";
import { createPinia, PiniaVuePlugin } from "pinia";

Vue.use(PiniaVuePlugin);
const pinia = createPinia();
Vue.config.productionTip = false;

new Vue({
  router,
  pinia,
  render: (h) => h(App),
}).$mount("#app");

定义一个store

/pinia/index.js文件

import { defineStore } from "pinia";

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore("globaltop", {
  // other options...
  // 推荐使用 完整类型推断的箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0,
      name: "Eduardo",
      isAdmin: true,
      date: "2022-10-01",
    };
  },
  actions: {
    increment(num) {
      this.counter = this.counter + num;
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random());
    },
  },
});

组件中使用

<template>
  <div class="about">
    <h1>This is an about pageh1>
    <button class="button" @click="changeStore">点击改变storebutton>
  div>
template>
<script>
import { useStore } from "@/pinia/index";
const store = useStore();

export default {
  name: "AboutView",
  components: {},
  data() {
    return {};
  },
  mounted() {
    console.log("about-moubtd", store);
  },
  methods: {
    changeStore() {
      store.increment(4);
    },
  },
};
script>
<style scoped lang="scss">
.about {
  background-color: green;
  .button {
    // color: yellow;
    height: 30px;
    width: 180px;
    border-width: 1px;
    color: currentColor;
  }
}
style>

app.js:371 Uncaught Error: []: getActivePinia was called with no active Pinia. Did you forget to install pinia?
	const pinia = createPinia()
	app.use(pinia)
This will fail in production.

报错，解决方法，路由动态加载

const routes = [
  {
    path: "/",
    name: "layout",
    redirect: "/home",
    component: Layout,
    children: [
      {
        path: "/home",
        name: "home",
        component: HomeView,
      },
      {
        path: "/about",
        name: "about",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
      },
    ],
  },
];

改成一下方式就没有报错了

const routes = [
  {
    path: "/",
    name: "layout",
    redirect: "/home",
    component: Layout,
    children: [
      {
        path: "/home",
        name: "home",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/HomeView.vue"),
      },
      {
        path: "/about",
        name: "about",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
      },
    ],
  },
];