VUE3状态管理Pinia使用介绍

vue3中推荐使用的状态管理工具：pinia，真的很好用官方文档，中文文档

一、安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

二、src文件夹下新建store文件夹，并新建index.ts

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

三、在main.ts中引入pinia

import pinia from './store'
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

以上三个步骤，就已经配置好pinia了，具体使用，就是在store文件夹下创建一个个具体的store就可以了，一下以创建一个counter.ts为例说明
1.在store文件夹下创建文件 counter.ts，代码如下

import { defineStore } from 'pinia'

//创建一个id为counter的store，// 第一个参数是应用程序中 store 的唯一 id
const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 100
  }),
  getters: {
    doubleCounter(state) {
      return state.counter * 2
    }
  },
  actions: {
    changeCounterAction(newCounter: number) {
      this.counter = newCounter
    }
  }
})

export default useCounterStore

注意：具体的store命名一般以use开头
2.在组件中使用store

<template>
  <div class="main">
    <h2>main: {{ counterStore.counter }}-{{ counterStore.doubleCounter }}</h2>
    <button @click="changeCounter">修改counter</button>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from '@/store/counter'

const counterStore = useCounterStore()

function changeCounter() {
  counterStore.changeCounterAction(123)
}
</script>