vue 3.0 pinia的使用

1.npm install pinia

// main.js引入pinia

import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const painia = createPinia()

app.use(painia).mount('#app')

2.定义一个store
通过 defineStore 来定义 store，它需要一个唯一的名称，作为第一个参数传入：

import { defineStore } from 'pinia'

// 定义并导出容器，第一个参数是容器id，必须唯一，用来将所有的容器
// 挂载到根容器上
export const commentStore = defineStore('myStore',{
  // 定义state，用来存储状态的
  state() {
    return {
    	count: 0
   }
  },
  // 定义getters，类似于computed，具有缓存功能
  getters:{},
  // 定义actions，类似于methods，用来修改state，做一些业务逻辑
  actions:{
  	changeCount() {
      this.count++
    }
  }
})

3.页面中引入使用

import { storeToRefs } from 'pinia'
import { commentStore } from '@/store'

// 计算属性
const comment = commentStore()
const { count } = storeToRefs(comment)

// 修改pinia中的state六种方式
// 方式一: 直接修改(不建议使用)
comment.count += 1

// 方式二: 如果修改多个数据，可以使用$patch批量修改
firstStore.$patch({
  count: comment.count + 1
})

// 方式三: $patch一个函数
comment.$patch(state=>{
  state.count++
})

// 方式四: 调用actions
comment.changeCount()

// 方式五: 替换整个state(不建议使用)
comment.$state={
  count: 2
}

// 方式六: 重置state(不建议使用)
comment.$reset()