Pinia

Pinia在Vue3的使用

本篇文章主要是总结Pinia在Vue3的使用

Pinia

1.安装pinia npm i pinia

2.在main.js中按需导入createPinia，创建pinia，使用pinia

import { createApp } from 'vue'
// #1
import { createPinia } from 'pinia'
import App from './App.vue'
// #2
const pinia = createPinia()
// #3
createApp(App).use(pinia).mount('#app')

3.创建仓库与使用

创建store文件夹，创建一个ts文件

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

export default defineStore('仓库名字',()=> {
  // state
  const count = ref(100)
  // getters
  const doubleCount = computed(() => count.value * 2)
  // mutation
  const update = ()=> count.value++
  //action
  const asyncUpdate = ()=> {
    setTimeout(() => {
      count.value++
    }, 1000)
  }
  return { count, doubleCount, update, asyncUpdate }
})

4.使用数据

import pinia名 from './stores/pinia路径'
import { storeToRefs } from 'pinia'
const { count, sum } = storeToRefs(ok())
const { doClick, doClickSync } = ok()

storeToRefs将pinia中的数据绑定成响应式

方法不需要进行绑定成响应式

总结

Vuex	Pinia
state	ref和reactive创建的响应式数据
getters	computed创建的计算属性
mutations和actions	普通函数，同步异步均可