Vue3怎么运用pinia状态管理工具

pinia是vue3新的状态管理工具，Vue3新的状态管理工具简单的等同于以前的vuex。它去除了突变，但也支持vue2，这是强烈推荐的。因为它的标志看起来像一个菠萝，我们也叫它大菠萝。

安装脚手架

npm i pinia

在mian.js文件中引入pinia，全局注册

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

store文件夹新建 index.js 文件

import {defineStore} from 'pinia'
export const useUserStore = defineStore("USER",{
  state() {
    return {
      name: '小米',
      age: 23,
      name1: '小花',
      age1: 21
    }
  },
  // 和vuex一样
  getters: {
  
  },
  // 和vuex一样
  actions: {
    setAge() {
      this.age--
    }
  }
})

页面中使用pinia中存储的状态

<template>
  <div>正常取值</div>
  <div>{{User.name}}</div>
  <div>{{User.age}}</div>
  <div>解构取值</div>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <div>解构取值转ref</div>
  <div>{{name1}}</div>
  <div>{{age1}}</div>
  <button @click="change1">change1</button>
  <button @click="change2">change2</button>
  <button @click="change3">change3</button>
  <button @click="change4">change4</button>
  <button @click="change5">change5</button>
  <div>
    <button @click="handleReset">重置</button>
  </div>
</template>
  
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useUserStore } from './store';
  
// 获取store中的值
let User = useUserStore()
  
// 通过ES6的结构取值，但是这个值不是响应式的
let {name,age} = User
  
// 通过pinia自带的方法，转换成ref，就是响应式的了
let {name1,age1} = storeToRefs(User)
  
// 改变store中值的方式有五种

// 方式一
function change1() {
  User.age++
}

// 方式二，可一次性修改多个值，对象的形式
function change2() {
  User.$patch({
    name: '雪见',
    age: 17
  })
}

// 方式三，可一次性修改多个值，函数的形式
function change3() {
  User.$patch((state) => {
    state.name = '徐长卿'
    state.age = 19
  })
}

// 方式四，哪怕修改一个值，也要传所有值？？？
function change4() {
  User.$state = {
    name: '茂茂',
    age: 16,
    name1: '李逍遥',
    age1: 18
  }
}

// 方式五，借助actions
function change5() {
  User.setAge()
  //也可以传参
  // User.setAge(999)
}
  
// 重置数据
function handleReset() {
  User.$reset()
}
</script>