beans

private blog

Xu Xiaomo's Blog - Vegetable chicken blog direct train

The full version of the series of articles has more pictures. CSDN blog post pictures need to be uploaded manually, so there are fewer pictures in the article.

Series Article Directory

Front-end series of articles - Portal
Back-end series of articles - Portal

---

---

beans

pinia is a new generation of state management tools, suitable for multiple frameworks, but it is a golden partner with vue3.

We can understand it as the next generation of vuex.

Download and install:

npm install pinia

Steps for usage:

1. In main.js, mount pinia on the root instance

2. Create warehouse data

   import {
         
          defineStore } from 'pinia'
   // useLoginStore是自定义的变量 - 通常都是用use开头的
   // defineStore是从pinia中解构的方法，固定的
   // loginStore是自定义的字符串 - 表示当前仓库的唯一标识符
   export const useLoginStore = defineStore('loginStore', {
         
         
       // state表示存放数据的地方
       // state的值是一个函数，返回的对象中存放具体的数据
       state: () => ({
         
         
           count: 0,
           isLogin: false 
       }),
       // getters表示过滤器的意思 - 也可以理解为计算属性
       getters: {
         
         
           // getters中操作state数据用state做参数
           double: (state) => (state.count + 1) * 2,
       },
       // actions表还是存放方法的地方
       actions: {
         
         
           // 方法中操作state数据用this
           increment() {
         
         
               this.count++
           },
           changeStatus(bool:boolean) {
         
         
               this.isLogin = bool
           }
       }
   })
   

3. Use warehouse data

   • Using state data in components

     1. Import the created warehouse

        import {
                  
                  useLoginStore} from '@/store/piniaStore'
        

     2. In order to ensure that the data is responsive, destructure the storeToRefs method from pinia

        import {
                  
                  storeToRefs } from 'pinia'
        

     3. Through the imported warehouse name, get the warehouse

        const store = useLoginStore()
        

     4. Make the warehouse responsive using storeToRefs, and deconstruct the data to be used from it

        let {
                  
                  isLogin, count } = storeToRefs(store)
        

   • Use getters in components - same way as state, deconstructed from reactive data

     let {
             
             double } = storeToRefs(store)
     

   • Use the method in actions in the component

     1. import warehouse name

        import {
                  
                  useLoginStore} from '@/store/piniaStore'
        

     2. Get the warehouse according to the warehouse name

        const store = useLoginStore()
        

     3. Directly deconstruct the method from the warehouse to get the method to be used in the actions and call it

        let {
                  
                  changeStatus} = store
        changeStatus(true)
        console.log(111, isLogin.value);
        

---

Note

A large number of pictures are missing in this blog post, which seriously affects the integrity of the content and the reading experience. For the full content, please go to my vegetable blog—— Xu Xiaomo's Blog