What is pinia?
This is a new state management tool for vue3. Simply put, it is equivalent to the previous vuex. It removes Mutations but also supports vue2, which is very recommended. Because its logo is like a pineapple, we also call it a big pineapple.
This isvue3The new state management tool, simply put, is equivalent to the previous onevuex, it was removedMutationsBut it also supportsvue2, very recommended. Because its logo is like a pineapple, we also call it a big pineapple.
Official website
/
Installation command
npm i pinia
use
1、Introduced inpinia, global registration
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './'
const app = createApp(App)
(createPinia())
('#app')2. Create a new store folderFiles, if you support TS, you can create them,Introduced in the filepiniaUsed to store state
import {defineStore} from 'pinia'
export const useUserStore = defineStore("USER",{
state() {
return {
name: 'Sedan',
age: 18,
name1: 'Hu Ge',
age1: 36
}
},
// Same as vuex getters: {
},
// Same as vuex actions: {
setAge() {
--
}
}
})3. Use on the pagepiniaStored status
<template>
<div>Normal value</div>
<div>{{}}</div>
<div>{{}}</div>
<div>Deconstruct the value</div>
<div>{{name}}</div>
<div>{{age}}</div>
<div>Deconstruct the value转ref</div>
<div>{{name1}}</div>
<div>{{age1}}</div>
<button @click="change1">change1</button>
<button @click="change2">change2</button>
<button @click="change3">change3</button>
<button @click="change4">change4</button>
<button @click="change5">change5</button>
<div>
<button @click="handleReset">Reset</button>
</div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useUserStore } from './store';
// Get the value in the storelet User = useUserStore()
// Take the value through the structure of ES6, but this value is not responsivelet {name,age} = User
// Convert it to ref through pinia's own method, which is responsivelet {name1,age1} = storeToRefs(User)
// There are five ways to change the store median value// Method 1function change1() {
++
}
// Method 2: Multiple values can be modified at one time, the form of the objectfunction change2() {
User.$patch({
name: 'Snow',
age: 17
})
}
// Method 3: Multiple values can be modified at one time, the form of functionfunction change3() {
User.$patch((state) => {
= 'Xu Changqing'
= 19
})
}
// Method 4: Even if you modify one value, you have to pass all values? ? ?function change4() {
User.$state = {
name: 'Mao Mao',
age: 16,
name1: 'Li Xiaoyao',
age1: 18
}
}
// Method 5, with the help of actionsfunction change5() {
()
//You can also pass the parameters // (999)
}
// Reset datafunction handleReset() {
User.$reset()
}
</script>
<style>
</style>This is the end of this article about Vue3-pinia state management. For more related content on Vue3-pinia state management, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!