pinia是什么轮锥？
這個是 vue3 新的狀態(tài)管理工具矫钓，簡單來說相當于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的舍杜，尤大推薦新娜。因為其logo像是一個菠蘿，所以我們還稱呼它為大菠蘿既绩。
官網(wǎng)
https://pinia.vuejs.org/
下載
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文件，支持TS的你就建立index.ts,文件中引入pinia使用饲握，用來存儲狀態(tài)
import {defineStore} from 'pinia'
export const useUserStore = defineStore("USER",{
state() {
return {
name: '景天',
age: 18,
name1: '胡歌',
age1: 36
}
},
// 和vuex一樣
getters: {
},
// 和vuex一樣
actions: {
setAge() {
this.age--
}
}
})
- 頁面中使用
pinia中存儲的狀態(tài)
<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
})
}
// 方式三，可一次性修改多個值铝耻，函數(shù)的形式
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)
}
// 重置數(shù)據(jù)
function handleReset() {
User.$reset()
}
</script>
<style>
</style>
