Vue3使用Pinia

很多时候需要全局状态管理，相比vuex更喜欢用pinia，原因就是简单好用，话不多说，使用开始

一、导入Pinia

在项目的命令行输入

npm install pinia

二、在main.js中使用插件

在main.js中导入并使用插件

import App from './App.vue'
import { createApp } from 'vue'
//  导入Pinia的创建函数
import {createPinia} from "pinia";
​
const app = createApp(App);
​
//  创建Pinia
const pinia = createPinia()
//  使用pinia
app.use(pinia)
​
app.mount('#app')

三、通过defineStore定义全局状态

• 函数原型：function defineStore(id, storeSetup)
• 参数：
  • id：状态id
  • storeSetup：提供状态的函数
• 返回值：一个获取该状态对象的函数

定义状态：通过ref属性定义

修改状态：① 通过函数提供修改状态的方式

                    ② 调用状态对象的$patch()方法

示例：

//  文件：@/pinia/store.js
import {defineStore} from "pinia";
import {ref, computed} from "vue";
​
export const useCountStore = defineStore('count', () => {
    //  定义状态
    const count = ref(0)
    //  修改状态
    function addOne() {
        count.value++;
    }
    //  返回状态对象
    return {
        count,
        addOne
    }
})

使用：

① 导入状态对象的获取函数

② 通过状态对象操作状态

<script setup>
  //    导入状态对象的获取函数
  import {useCountStore} from "@/pinia/store.js";
    //  获取状态对象
  const store = useCountStore()
  function addOne() {
    //  通过 状态对象.$patch({})方法修改状态
    store.$patch({
      count: store.count + 1
    })
  }
</script>
​
<template>
    <div>
      <span>count:{{store.count}}</span>
        <!-- 通过 状态对象.$patch({})方法修改状态 -->
      <button @click="store.addOne()">+1</button>
        <!-- 通过状态对象提供的方法修改状态 -->
      <button @click="addOne()">+1</button>
    </div>
</template>

注意：获取的状态对象中拿到的状态并不是响应式对象