Basic use of Pinia

• No, mutation、 No nested modules , relative vuex Yes ts There is better support

Click the official website link

One 、 install

npm install pinia

Two 、 Initialize configuration

src\main.ts

import {
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
     createPinia } from 'pinia'

//  establish pinia example 
const pinia = createPinia()

const app = createApp(App)

//  Mount to vue The root instance 
app.use(pinia)
app.mount('#app')

3、 ... and 、 Basic use

3.1 establish store And use state Value

• src\store\index.ts

import {
     defineStore } from "pinia";

// 1. Define and export containers 
// Parameters 1: Container of ID, Must be unique , future pinia Will mount all containers to the root container 
// Parameters 2: Option object 
// Return value : A function , Call to get the container instance 
export const useMainStore = defineStore('main', {
    
    /** *  Similar components data, Used to store the global state  * 1. It has to be a function : This is to avoid data state pollution caused by cross requests when rendering on the server  * 2. Must be an arrow function  */
    state: () => {
    
        return {
    
            count: 19
        }
    },
    /** *  Similar to component computed, Used to encapsulate calculated properties , With cache function  */
    getters: {
    },
    /** *  Similar to component methods, Encapsulate business logic , modify state */
    actions: {
    }
})

• src\components\HelloWorld.vue
• Be careful not to deconstruct directly to get value , Otherwise, it is not responsive , Use official storeToRefs()

<script setup lang="ts">
import {
     storeToRefs } from "pinia";
import {
     useMainStore } from "../store/index";
const mainStore = useMainStore();
const {
     count } = storeToRefs(mainStore);
console.log(mainStore.count);
const handleChangState = () => {
    
  mainStore.count++;
};
</script>

<template>
  {
    {
     mainStore.count }}=============={
    {
     count }}
  <button @click="handleChangState"> Button </button>
</template>

<style scoped>
.read-the-docs {
    
  color: #888;
}
</style>

3.2 Status update and actions

• In the case of multiple data modifications , Use $patch Good performance in batch modification

src\store\index.ts

import {
     defineStore } from "pinia";

// 1. Define and export containers 
// Parameters 1: Container of ID, Must be unique , future pinia Will mount all containers to the root container 
// Parameters 2: Option object 
// Return value : A function , Call to get the container instance 
export const useMainStore = defineStore('main', {
    
    /** *  Similar components data, Used to store the global state  * 1. It has to be a function : This is to avoid data state pollution caused by cross requests when rendering on the server  * 2. Must be an arrow function  */
    state: () => {
    
        return {
    
            count: 19
        }
    },
    /** *  Similar to component computed, Used to encapsulate calculated properties , With cache function  */
    getters: {
    },
    /** *  Similar to component methods, Encapsulate business logic , modify state */
    actions: {
    
        handleState(num: number) {
    
            this.count += num
        }
    }
})

src\components\HelloWorld.vue

<script setup lang="ts">
import {
     storeToRefs } from "pinia";
import {
     useMainStore } from "../store/index";
const mainStore = useMainStore();
const {
     count } = storeToRefs(mainStore);
const handleChangState = () => {
    
  //  Method 1 :
  // mainStore.count++;
  //  Method 2 :
  // mainStore.$patch({
    
  // count: mainStore.count + 1,
  // });
  //  Method 3 :
  // mainStore.$patch((state) => {
    
  // state.count++;
  // });
  //  Method four :
  mainStore.handleState(10);
};
</script>

<template>
  {
    {
     mainStore.count }}=============={
    {
     count }}
  <button @click="handleChangState"> Button </button>
</template>

<style scoped>
.read-the-docs {
    
  color: #888;
}
</style>

3.3getters

src\store\index.ts

import {
     defineStore } from "pinia";

// 1. Define and export containers 
// Parameters 1: Container of ID, Must be unique , future pinia Will mount all containers to the root container 
// Parameters 2: Option object 
// Return value : A function , Call to get the container instance 
export const useMainStore = defineStore('main', {
    
    /** *  Similar components data, Used to store the global state  * 1. It has to be a function : This is to avoid data state pollution caused by cross requests when rendering on the server  * 2. Must be an arrow function  */
    state: () => {
    
        return {
    
            count: 19
        }
    },
    /** *  Similar to component computed, Used to encapsulate calculated properties , With cache function  */
    getters: {
    
        count10(state) {
    
            console.log(' See if it is cached ')
            return state.count + 10
        }
    },
    /** *  Similar to component methods, Encapsulate business logic , modify state */
    actions: {
    
    }
})

<script setup lang="ts">
import {
     storeToRefs } from "pinia";
import {
     useMainStore } from "../store/index";
const mainStore = useMainStore();
</script>

<template>
  {
    {
     mainStore.count10 }}
  {
    {
     mainStore.count10 }}
  {
    {
     mainStore.count10 }}
</template>

<style scoped>
.read-the-docs {
    
  color: #888;
}
</style>