vue3使用pinia

vue3使用pinia

介绍

pinia的介绍官网都有的，可查阅中文版，官网：https://pinia.web3doc.top

安装

yarn add pinia
or
npm i pinia

创建store

// store/index.ts
import { defineStore } from 'pinia'
// defineStore(key,options) 必须传递一个唯一key作为标识
export const useCounterStore = defineStore('counterStore', {
  state: () => ({
    counter: 0
  }),
  actions: {
    // 方法 可以是异步 async addCounter(){}
    // 在这里也可以访问其他的store
    addCounter () {
      this.counter++
    }
  },
  getters: {
    doubleCounter (state):number {
      // 可以使用this
      // return this.counter * 2
      // 在这里也可以访问其他的store
      return state.counter * 2
    }
  }
})

使用

// main.ts
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App)
  .use(createPinia())
  .mount('#app')

在组件中使用store

<template>
  <h1>HelloWorld</h1>
  <h3>counter:{{ counter }}</h3>
  <h3>doubleCounter:{{ doubleCounter }}</h3>
  <button @click="addCounter">
    counter++
  </button><br>
  <button @click="replaceStore">
    替换state状态值
  </button>
</template>

<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '../store'
const counterStore = useCounterStore()
// 第一次改变store状态 $path对象形式
// const addCounter = () => {
//   counterStore.$patch({
//     counter: counterStore.counter + 1
//   })
// }
// 第二种修改store状态 $path 传递回调函数 第一个参数就是state
// const addCounter = () => {
//   counterStore.$patch((store) => {
//     store.counter++
//   })
// }
// 第三种修改store状态 直接通过store修改
// const addCounter = () => {
//   counterStore.counter++
// }
// 第四种修改store状态
const addCounter = () => {
  counterStore.addCounter()
}

// 访问state的状态两个方法
// !不能这样使用 因为丢掉了响应式
// const { counter, doubleCounter } = counterStore

// 一使用pinia自带的storeToRefs
const { counter, doubleCounter } = storeToRefs(counterStore)

// 二使用vue的computer 从store中读取
// const counter = computed(() => counterStore.counter)
// const doubleCounter = computed(() => counterStore.doubleCounter)


// 替换状态已有的属性值 相当于重新赋值而已
const replaceStore = () => {
  counterStore.$state = { counter: 20 }
}
</script>

以上只是pinia的基本使用，具体内容还是参考官方为准！！！