Direct to pinia official website
1. Install it in your favorite way
yarn add pinia # Or use npmnpm install pinia
Introduced
import { createApp } from 'vue'
import App from './'
const app=createApp(App)
import { createPinia } from 'pinia' //Introduce pinia(createPinia())
('#app') 3. Create a store file and configure internal files
import { defineStore } from 'pinia' //Introduce pinia
//The official website here is exported separately. It can be written as the default export. The official explanation is for everyone to agree on the word that the warehouse starts with use. The name of the fixed unified small warehouse is not easy to be confused.export const useCar=defineStore("test",{
state: () =>{
return ({
msg:"This is pinia",
name:"Little",
age:18
}) //To avoid errors, the returned value is wrapped with () }
})4. Component usage method
<template>
<h1>{{}}{{}}{{}}</h1>
<button @click="modify">Revise</button>
</template>
<script>
import { defineComponent, ref } from 'vue';
import {
reactive,
toRefs,
onMounted,
onActivated
} from "vue";
import {useCar} from "../store/" //Introduce files in the previously configured pinia folderexport default defineComponent({
let store=useCar() //take over setup() {
const state = reactive({
testMsg: "Raw Value",
});
onMounted(async () => {});
onActivated(() => {})
const methods = {
modify(){
= //Modify the data in pinia ()
}
};
return {
...toRefs(state),
...methods,
};
}
})
</script>
5. Reset store.$reset()
<template>
<h1>{{}}{{}}{{}}</h1>
<button @click="reset">Reset</button>
</template>
<script>
import { defineComponent, ref } from 'vue';
import {
reactive,
toRefs,
onMounted,
onActivated
} from "vue";
import {useCar} from "../store/" //Introduce files in the previously configured pinia folderexport default defineComponent({
let store=useCar() //take over setup() {
const state = reactive({
testMsg: "Raw Value",
});
onMounted(async () => {});
onActivated(() => {})
const methods = {
reset(){
store.$reset() //Reset the data in pinia ()
}
};
return {
...toRefs(state),
...methods,
};
}
})
</script>
6. Group modification store.$patch, you can modify pinia data the same way
Features: batch modification but the status is only refreshed once
<template>
<h1>{{}}{{}}{{}}</h1>
<button @click="modify">Revise</button>
<button @click="reset">Reset</button>
<button @click="allModify">群体Revise</button>
</template>
<script>
import { defineComponent, ref } from 'vue';
import {
reactive,
toRefs,
onMounted,
onActivated
} from "vue";
import {useCar} from "../store/" //Introduce files in the previously configured pinia folderexport default defineComponent({
let store=useCar() //take over setup() {
const state = reactive({
testMsg: "Raw Value",
});
onMounted(async () => {});
onActivated(() => {})
const methods = {
modify(){
= //Modify the data in pinia ()
},
reset(){
store.$reset() //Reset the data in pinia ()
},
allModify(){
store.$patch({
name:"Flower",
age:20,
})
}
};
return {
...toRefs(state),
...methods,
};
}
})
</script>7. Subscribe to modify
//You can view the status and its changes through the store's $subscribe() method. It will be triggered once when modifying the status through patch.store.$subscribe((mutation, state) => {
// Whenever it changes, persist the entire state to local storage ('hello', (state))
})Getter is exactly equivalent to the calculated value of the Store state. They can be defined using the getters property in defineStore(). They receive "state" as the first parameter to encourage the use of arrow functions: (ps: Although encouraged, it still provides a way to use non-es6 players. This can be used internally to represent state)
//store/fileexport const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => * 2,
},
})
//Use directly in components: <p>Double count is {{ }}</p>Mutaiion is not provided in pinia because Actions is enough (it can be modified asynchronously and synchronously). The reason for providing this function is to unify the public modification state in the project.
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
actions: {
increment() {
++//1. There is this },
randomizeCounter(state) {//2. There are parameters. Which one you want to use. Which one you want to use. = (100 * ())
},
randomizeCounter(state) {
//Async function. Interface is assigned successfully ("app/productSelection/categoryRows", {}, "post").then((res) => {
=
});
}
},
})
//Usage in components: setup() {
const store = useStore()
()
()
}This is the article about the introduction of Pinia repository in Vue3. For more information about Pinia usage in Vue3 repository, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!