Pinia | 使用总结

特点

• 完整的ts的支持
• 足够轻量，压缩后的体积只有1kb左右
• 去除mutations，只有state，getters，actions
• actions支持同步和异步
• 代码扁平化没有模块嵌套，只有store的概念store之间可以自由使用，每一个store都是独立的
• 无需手动添加store，store一旦创建便会自动添加
• 支持Vue3 和 Vue2

安装

npm install pinia@next

起步

在main.js中引入并注册pinia

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia).mount('#app')

创建src/store/index.ts,通过defineStore定义一个store并export出去

import { defineStore } from 'pinia'
export const useCounterStore = defineStore('count', {
  id:'count',
  state: () => ({ count: 1 }),
  getters:{
    sign():string { return `No.${this.count}` },
    // sign(state){ return `No.${state.count}` }
    // sign:(state) => `No.${state.count}`
  },
  actions: {
    add() { this.count++ }
  },
})

也可以使用 Composition 风格的语法，去创建一个store

export const useCounterStore = defineStore('count', () => {
  const count = ref(0)
  const sign = computed(() => return `No.${count.value}`)
  function increment() { count.value++ }
  return { count, sign, increment }
})

使用

import { useCounterStore } from '../stores/count'
const counterStore = useCounterStore()

使用变量counterStore即可调用此store实例中的属性和方法

counterStore.count
counterStore.sign
counterStore.add()

解构 storeToRefs

import { storeToRefs } from 'pinia'
const {count,sign} = storeToRefs(useCounterStore())
const { increment } = useCounterStore()

state

1. 直接修改值 counterStore.current++
2. 通过实例的$patch方法批量修改值

counterStore.$patch({
  count: 123,
  sum: 456
})
或
counterStore.$patch((state)=>{
  state.current++
  state.sum = 666
})

3. 通过实例的$state方法覆盖值

counterStore.$state.count = 666
或
counterStore.$state = {
  count: 123,
  sum: 456
}

5. 通过actions修改

getters

getters主要作用类似于computed数据修饰并且有缓存
getters之间可以互相调用

actions

actions支持同步和异步
actions之间可互相调用

API

$reset

调用$reset(),可将store实例的state初始化

$subscribe

只要state中属性变化，就会触发此函数

counterStore.$subscribe((args,state)=>{
  ......
},
{ detached: true } //可选，组件卸载后会调用此函数
)

$onAction

只要调用了actions中的函数，就会触发此函数

counterStore.$onAction((args)=>{ ...... })

插件

const pinia = createPinia()
pinia.use(piniaPlugin({...}))

const piniaPlugin = (options)=>{
  return (context: piniaPluginContext)=>{
    ......
    return ......
  }
}