詳解Vue3-pinia狀態管理
pinia是什麼?
這個是 vue3 新的狀態管理工具,簡單來說相當於之前 vuex,它去掉瞭 Mutations 但是也是支持 vue2 的,尤大推薦。因為其logo像是一個菠蘿,所以我們還稱呼它為大菠蘿。
這個是 vue3
新的狀態管理工具,簡單來說相當於之前 vuex
,它去掉瞭 Mutations
但是也是支持 vue2
的,尤大推薦。因為其logo像是一個菠蘿,所以我們還稱呼它為大菠蘿。
官網
https://pinia.vuejs.org/
安裝命令
npm i pinia
使用
1、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')
2、store文件夾新建 index.js
文件,支持TS的你就建立 index.ts
,文件中引入 pinia
使用,用來存儲狀態
import {defineStore} from 'pinia' export const useUserStore = defineStore("USER",{ state() { return { name: '景天', age: 18, name1: '胡歌', age1: 36 } }, // 和vuex一樣 getters: { }, // 和vuex一樣 actions: { setAge() { this.age-- } } })
3、頁面中使用 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> <style> </style>
到此這篇關於Vue3-pinia狀態管理的文章就介紹到這瞭,更多相關Vue3-pinia狀態管理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 還在用vuex?來瞭解一下pinia
- JavaScript Pinia代替 Vuex的可行性分析
- vue中使用 pinia 全局狀態管理的實現
- Vue生態的新成員Pinia的詳細介紹
- Vue狀態管理庫Pinia詳細介紹