1. What is pinia
In layman's terms:
① vuex streamlined version, and vue is more recommended to use.
② The advantage is better than vuex. Let’s learn about pinia below.
2. Advantages
| pina | vuex |
|---|---|
| pinia supports both vue2 and vue3 | vue2 needs to use vuex 3 version vue3 needs to use vuex 4 version |
| Without synchronization and asynchronous, better ts support | Synchronous asynchronous, not very compatible with ts |
| Enjoy automatic completion … |
Need to inject, import functions, call them … |
3. Use (very simple)
① Installation
npm install pinia
②Join in
import { createApp } from 'vue'
import App from './'
import { createPinia } from 'pinia' //Import piniaconst pinia = createPinia(); //Calling piniacreateApp(App)
.use(pinia)
.mount('#app')
③ Create pinia repository
Generally selected under /src's store folder Example: Create as
/src/store/ is:
import { defineStore } from 'pinia'
export const PiniaStore = defineStore('main',{ //Export pinia repository state:() => { //Equivalent to global data() return {
name:'Zhang San',
age:18
}
},
getters:{}, //Equivalent to global computed actions:{} //Equivalent to global methods})
③Use (very easy)
Take /src/view/ as an example:
Vue3 writing method:
<template>
<h3>{{}}</h3> <!--use-->
<h3>{{}}</h3>
<button @click="++">Revisepiniadata</button> <!--Revise-->
</template>
<script setup>
import { PiniaStore } from '../../store/pinia'
const pinia = PiniaStore();
</script>
Vue2 writing method:
<template>
<div>
<h3>{{}}</h3>
<h3>{{}}</h3>
<button @click="++">Revisepiniadata</button>
</div>
</template>
<script>
import { PiniaStore } from '../../store/pinia'
export default {
created(){const pinia = PiniaStore();}
}
</script>
Don't worry about problems with pinia. The official has clearly stated that pinia is the concept of vuex 5 version, and the official recommends pinia rather than vuex
Summarize
That’s all for this article. I hope it can help you, and I hope you can pay more attention to more of my content!