Tag Archives: & View

How to Solve pinia Error in ts File

Use Pinia in ts file report an error:

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

 

1. Create the store.ts file

import { createPinia } from "pinia";

const store = createPinia();

export { store };

2、 Introduced in main.ts

import { createApp } from "vue";
import "./style.css";
import "./main.css";
import App from "./App.vue";
import ElementPlus from "element-plus";
import Avue from "@smallwei/avue";
import "@smallwei/avue/lib/index.css";
import "@/assets/css/mapbox-gl.css";
import { store } from "@/pinia/index";    // Introduce the created pinia
import router from "@/router/index";
import "element-plus/dist/index.css";

const app = createApp(App);

app.use(router);
app.use(store);  // use pinia
app.use(ElementPlus);
app.use(Avue);
app.mount("#app");

3、 Create your own Pinia file

import { defineStore } from "pinia";

interface State {
  nodeArr: any[] | [];
  stencilLoading: boolean;
  selectNodeId: number;
  lcNodeData: LCDataType | {}
}

const defaultState: State = {
  nodeArr: [], // Node data in the drag and drop bar
  stencilLoading: true, // Loading of the drag bar
  selectNodeId: -1, // The node id of the selected drag bar
  lcNodeData: {}, // The LC data in the selected canvas
};

export const lcDataStore = defineStore("lcData", {
  state: () => {
    return defaultState;
  },
  getters: {},
  actions: {},
});

4、 Using Pinia in the TS file

import { lcDataStore } from "@/pinia/lcAssign";
import { store } from "@/pinia/index";

const lcStore = lcDataStore(store);   // Here you have to pass in the store

// After that, you can use the properties and methods inside the lcStore

webpack4 Use webpack-dev-server Error [How to Solve]

Today, I reported an error with webpack dev server in the project to visually check the version problem
the webpack version used in the project is "webpack": "^ 4.28.4"
the default is "webpack dev server": "^ 4.7.3" , and the reduced version is "webpack dev server": "^ 3.1.14" . The problem is solved

Then start the error report:
check the data and find that the startup command is changed to NPX webpack server -- config webpack dev.js

After Vue is packaged to the server, the static resource path reports an error

The error reporting path is:
http: domain name/CSS/XX css

In fact, it should be:
http: domain name/dist/CSS/XX/CSS

Method:
ensure that the value of publicpath is: publicpath: ‘. /’

ps:config.js or Vue-config.js file, according to the actual situation, if the editor cannot be found, search publicpath globally

[Solved] Error in v-on handler: “Error: please transfer a valid prop path to form item

Function Description:

Click “add” to add a line; Select a line and click Delete to delete it.

Question:

Click Delete to split only the model bound array to remove the array elements, and then click OK to validate the form and submit it normally; If you click Delete to split the array and directly call the function bound by the OK button to submit the form, the above error will be prompted during form verification and cannot be submitted normally. [Note: the code is not pasted completely, only the important part is pasted]

/*Delete*/     
delete(){
          this.form.params.splice(this.currentIndex, 1);
          this.currentIndex= this.form.params.length - 1;
          this.submitForm();
      }

/* Form Submission Method*/     
submitForm(){
      this.$refs["from"].validate((valid) => {
        if (valid) {
          update(this.from).then(response => {
            alert("Submit Successfully");
          });
        }
      })
}

reason:

In the delete method, the form is submitted after the splice. Because the change of the array has not been rendered, the submitted form is still before the splice, so an error is reported.

Solution:

Use promise().then() to put the call to the form submission in the then, so that it can be guaranteed to be submitted after rendering.

ERROR command failed: npm install –loglevel error vue-cli-plugin-cube-ui -D

Execute the command at the vscode terminal: Vue add cube UI reports an error   Command failed: NPM install — loglevel error Vue cli plugin cube UI – d the solution is as follows:

Exit vscode – & gt; Right click the visual studio code icon – & gt; Click Properties – & gt; Click compatibility – & gt; Check the “run this program as administrator” option – & gt; Click OK

 

[Vue warn]: Invalid prop: type check failed for prop “disabled“

[Vue warn]: invalid prop: type check failed for prop “disabled”
Translation:
the attribute is invalid: the type check of the attribute “disabled” fails. It should be a Boolean value, and the obtained string value is “isdisabledfn()”
solution:
in the code: disabled is a Boolean value, but the judgment statement result is not a Boolean value. Just convert it.

The Vue mobile terminal cannot use string.replaceall, and the error message is blank

When developing Vue, the replaceall function is used, and there is no problem debugging on the PC side

However, when packaging and deploying to the mobile end test, it is found that some pages are blank and the console only displays error {}

After troubleshooting, the replaceall function reports an error. Replace it with replace

Nuxt uses the image lazy to load the lazy component tag, and an error is reported

Problems encountered when nuxt uses image lazy loading, when & lt; lazy-component> tag is still normal, but after it is used, more than 40 exceptions will be prompted directly

found later. It needs to be found in & lt; lazy-component> & lt; no-ssr> label is good

<no-ssr>
	<lazy-component>
	...
	</lazy-component>
</no-ssr>

Personal blog address: nuxt uses pictures to load lazy component tags and reports an error

Error reported after moving or copying Vue items: cannot find module ‘xxx‘

Problem Description:

When moving a folder item or a copied item, run the error: cannot find module ‘xxx’


Solution:

Delete node_ In the modules folder, delete the package-lock.json file, then NPM install, and then run the project


 

The following is the complete error message

PS D:\test> npm run dev

> [email protected] dev D:\test
> vite

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'esbuild'
Require stack:
- D:\test\node_modules\[email protected]@vite\dist\node\chunks\dep-85dbaaa7.js
- D:\test\node_modules\[email protected]@vite\dist\node\cli.js
- D:\test\node_modules\[email protected]@vite\bin\vite.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\test\node_modules\[email protected]@vite\dist\node\chunks\dep-85dbaaa7.js:13:15)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\test\\node_modules\\[email protected]@vite\\dist\\node\\chunks\\dep-85dbaaa7.js',
    'D:\\test\\node_modules\\[email protected]@vite\\dist\\node\\cli.js',
    'D:\\test\\node_modules\\[email protected]@vite\\bin\\vite.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `vite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2021-11-01T02_40_03_715Z-debug.log

Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

Problem: version correspondence
solution:

    uninstall node sass

    npm uninstall node-sass
    
      install version 4.14.1

      npm install [email protected]
      
        network problems may occur during installation. Taobao image can be used. It is recommended to use the following methods. It is not recommended to permanently use Taobao image
        single use

        npm install --registry=https://registry.npm.taobao.org
        
          if you still cannot install, you can find the corresponding version number in the package.json file and modify it directly. The version number I use here is
          node sass: 4.14.1
          sass loader: 7.1.3
          generally, the idea will remind the update dependency in the lower right corner, otherwise the node will be deleted directly_ Download the modules folder again

          Reference link 1
          reference link 2

An error is reported when passing data pages using Ajax: Vue is not defined

1、 Resolution:

Literal meaning: Vue is not defined, that is, the introduction of Vue source code;

2、 Try to resolve:

1: Try 1: check whether the Vue source code import (path and script tag) is wrong
2: try 2: there is no problem with the import syntax, that is, check whether there is a Vue source code file in the target folder, and find no (reason: I added the Vue source code file manually later, but it was not generated in time in the target)

3、 Solution steps:

Click clean to clean and regenerate the target file. The Vue source code is successfully introduced and the error is resolved;

Screenshot: