Pinia的简单使用

定义一个Store

import {defineStore} from 'pinia'
​
export const useStore = defineStore('main',{
    
})

使用store

import{useStore} from '@/store/counter'
setup(){
    const store = useStore()
}

状态：state

状态被定义为返回初始状态的函数

import {defineStore} from 'pinia'
const useStore = defineStore('storeId',{
    state:()=>{
        return{
            counter:0,
            name:'1234',
            isAdmin:true
        }
    }
})

访问状态：

通过store实例访问状态来直接读取和写入

const store = useStore()
​
store.counter++

重置状态

const store = useStore()
store.$reset()

更改状态

store.$state = {counter:666,name:'Paimon'}

访问器Getters

Getters完全等同于store的计算值它们可以用 defineStore() 中的getters属性定义。其接收 state 作为第一个参数

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

访问getter

<p>Double count is {{ store.doubleCount }}</p>

action

相当于组件中的方法

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

action可以是异步的

内容来源：blog.csdn.net/qq_28550263…