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

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