Simple use of Vue state management tool pinia

Simple use of Vue state management tool pinia

1 Introduction

Piniais a Vuestate management tool, which is Vue 3one of the officially recommended state management libraries. PiniaThe goal of is to provide a simple, lightweight state management solution, which is Vue 3built on top of the new reactive API and the new composition API, which is very intuitive and natural to use.

2. The use of pinia in vue3

• First install it in the project pinia, execute it , and then introduce it in npm install piniathe entry filemain.js
• We choose Vuea similar approach to the optional API of , passing in an object with the state, actionsand getterspropertiesOption
• You can think of stateis storethe data of the (data), gettersis storethe computed property of the (computed), and actionsis the method (methods).

// main.js
import {
    
     createApp } from 'vue'
import {
    
     createPinia } from "pinia"
import App from './App.vue'
import './assets/main.css'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

• Create a store

// src/store/user.js
import {
    
     defineStore } from "pinia"

export const useUserStore = defineStore({
    
    
  id: "user"
})

• Define the state and introduce the use

// src/store/user.js
import {
    
     defineStore } from "pinia"

export const useUserStore = defineStore({
    
    
  id: "user",
  state: () => {
    
    
    return {
    
    
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  }
})

// src/pages/user.vue
<template>
  <div class="user">
    {
   
   { user.firstName }} -- {
   
   { user.lastName }}
  </div>
</template>

<script setup>
import {
      
       useUserStore } from "../store/user"
const user = useUserStore()
</script>

• Define the getter and introduce the use

// src/store/user.js
import {
    
     defineStore } from "pinia"

export const useUserStore = defineStore({
    
    
  id: "user",
  state: () => {
    
    
    return {
    
    
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  },
  getters: {
    
    
    fullName(state) {
    
    
      return state.firstName + " " + state.lastName
    }
  }
})

// src/pages/user.vue
<template>
  <div class="user">
    {
   
   { user.fullName }}
  </div>
</template>

<script setup>
import {
      
       useUserStore } from "../store/user"
const user = useUserStore()
console.log(user.fullName);
</script>

• Define the action and use it. The methods in the action can be synchronous or asynchronous.

// src/store/user.js
import {
    
     defineStore } from "pinia"

function apiGetData(name) {
    
    
  return new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
      if(name === "Jack Joe") {
    
    
        resolve({
    
     age: 18 })
      } else {
    
    
        reject({
    
     msg: "查无此人!" })
      }
    }, 2000);
  })
}
export const useUserStore = defineStore({
    
    
  id: "user",
  state: () => {
    
    
    return {
    
    
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  },
  actions: {
    
    
    changeName(name) {
    
    
      [ this.firstName, this.lastName ] = name.split(" ")
    },
    async getUserData(name) {
    
    
      try {
    
    
        const res = await apiGetData(name)
        return res
      } catch(err) {
    
    
        return err
      }
    }
  },
  getters: {
    
    
    fullName(state) {
    
    
      return state.firstName + " " + state.lastName
    }
  }
})

// src/pages/user.vue
<template>
  <div class="user">
    {
   
   { user.fullName }}
  </div>
</template>
<script setup>
import {
      
      } from "vue"
import {
      
       useUserStore } from "../store/user"

const user = useUserStore()
console.log(user.fullName);
//同步方法
user.changeName("Marry Gren")
//异步方法
const getUser = async () => {
      
      
  const userData = await user.getUserData("Jack Joe")
  console.log(userData);// {age: 18}
}
getUser()
</script>