A Vue3 project used Vuex for state management. Recently, everyone is talking about Pinia. I looked at the documentation and found that pinia is closer to Composition API, TypeScript friendly and concise, EMMM… , sweet!

It had to be arranged, so I started replacing vuex with Pinia.

  1. storeAll files under the folder are reconstructed
  2. Project all based onvuexState is replaced with basedpiniaThe state of the

= Reactive loss of status acquisition

And then the first problem, if you’re going to get some state and do something, you don’t want to do that

import { useSettingStore } from "@/store/setting";
const settingStore = useSettingStore();
const isCollapse = settingStore.isCollapse;
const changeCollapse = () = >{ settingStore.isCollapse = ! isCollapse; };Copy the code

Const isCollapse = settingstore.iscollapse; The state obtained by = assignment is unresponsive. The correct way to retrieve the state is to destruct it through storeToRefs. The modified code is as follows:

import { storeToRefs } from "pinia";
import { useSettingStore } from "@/store/setting";
const settingStore = useSettingStore();
const { isCollapse } = storeToRefs(settingStore);
const changeCollapse = () = >{ settingStore.setCollapse(! isCollapse.value); };Copy the code

Ps: The best way to change the status is through action.

CDN load Vue line environment Pinia response loss

This pit is really a pit where if you don’t think right, you die. In order to load the project faster, I configured external to load Vue and ElementPlus through CDN. Here is also the configuration process for convenience of those who need it.

// vite.config.js
import { viteExternalsPlugin } from "vite-plugin-externals";
plugins: [
    // External CDN imports dependent packages
    viteExternalsPlugin(
        {
          vue: "Vue"."element-plus": "ElementPlus",})]Copy the code
// index.html
<head>
    <meta .
    <!--The importVue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <! -- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <! Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <title>.<head>
Copy the code

That’s it. This uses the viet-plugin-externals plugin. Be sure to install it.

Here, everything is wonderful, pack up and go online!

After the project was deployed, I did a little bit of testing, and I found that when I clicked on this button to open up the sidebar,

Didn’t work? ! Open local service, click, silky smooth than Dove! The problem then is the difference between the online environment and the local service. Since the online environment needs to be deployed every time, it is quite troublesome (I deployed a set of tests on the personal server, so it does not affect the real online environment). Meanwhile, in order to compare whether the online environment is a problem (Linux server and Nginx configuration), I obtained isCollapse on the login page and tried to operate. Similarly, there is no problem with the local service. If you pack and start Live Serve, you find that the local environment does not work either. Then you can determine that there is a problem with the packaged file. Since I configured THE CDN loading Vue in my project, I naturally thought of this problem. I dried the CDN loading, packed it again, and started Live Serve. I found that the local environment was ok. At this point, you can confirm that the configuration CDN is causing this problem after loading. Since there are many dependencies and modules in the actual project, in order to eliminate interference and make debugging more convenient, I opened a new test project (I had such a special project for testing problems before, which was used to reproduce and debug problems in the actual project). First, I did well in Vue ElementPlus Pinia and did not open CDN loading. Both the local service and the packaged local environment are OK, then start CDN loading, the local service is OK, the packaged local environment pinia response failure, perfect reappearance. The next step is to investigate the specific causes. There are two points:

  1. vite-plugin-externals
  2. pinia

If you look at the README for viet-plugin-externals, you can see that it simply converts the dependency library into a global variable under the window.

/ / options
viteExternalsPlugin({
  vue: 'Vue',})./ / the source code
import Vue from 'vue'
/ / after the transformation
const Vue = window['Vue']
Copy the code

There’s nothing else going on, so I don’t think it’s the problem, so rule it out. Then pinia was left. At this time, I opened the packaged Vendor. js and found the Vue code in it.

Vue hack array

Then I looked at pinia’s source code and saw that it relied on the vue-Demi library, which in turn relied on Vue, By default, the external plugin vite-plugin-externals does not handle packages under node_modules, so the Vue instance we used is not the same as the pinia bound Vue instance. So the state in which we operate pinia is represented in the project as no response. Fortunately, viet-plugin-externals provides the configuration to handle the package under node_modules, so modify the configuration as follows:

// vite.config.js
import { viteExternalsPlugin } from "vite-plugin-externals";
plugins: [
    // External CDN imports dependent packages
    viteExternalsPlugin(
        {
          vue: "Vue"."element-plus": "ElementPlus"}, {filter(code, id) {
            // Handle pinia to solve the problem of CDN loading Vue responsiveness loss
            if (id.includes("pinia")) {
              return true;
            }
            return false; }}]Copy the code

This way, viet-plugin-externals will help us process the Vue that pinia relies on as window[‘Vue’].

Package the test again, and the local environment and the deployment line environment are OK!

If you have any questions or suggestions, please leave a comment!