Vue新一代狀態管理工具Pinia的具體使用

3403771864 發布于2022-09-08 22:14 / 959人閱讀

　　很多人都在問 pinia是什么？其實它是一個類似的插件，是vuex的最新一代的輕量級狀態管理插件，建議安利在很多新項目中其中pinia。

　　Pinia 的優點

　　簡便，存儲和組件變得很類似，你可以輕松寫出優雅的存儲。

　　類型安全，通過類型推斷，可以提供自動完成的功能。

　　vue devtools 支持，可以方便進行調試。

　　Pinia 支持擴展，可以非常方便地通過本地存儲，事物等進行擴展。

　　模塊化設計，通過構建多個存儲模塊，可以讓程序自動拆分它們。

　　非常輕巧，只有大約 1kb 的大小。

　　服務器端渲染支持。

　　起步安裝

　　npm i pinia

　　核心語法

　　pinia的核心語法有State，Getters，Actions，Plugins以及Stores outside of components（在組件外進行調用）。可以發現跟vuex4相比，pinia少了一個Mutation，在pinia中，是直接使用actions去做狀態的修改。在actions中以前我們是通過state.去獲得狀態，而在這里可以直接通過this. 獲取狀態

　　可以在src下新建一個store文件夾用來存放pinia相關的東西

　　index.ts
　　import { defineStore } from 'pinia'
　　export const useCounterStore = defineStore('counter', {
　　state: () => {
　　return { count: 0 }
　　},
　　// could also be defined as
　　// state: () => ({ count: 0 })
　　actions: {
　　increment() {
　　this.count++
　　},
　　},
　　})

　　　訪問state

　　我們可以直接通過state.訪問

　　const store = useStore()
　　store.counter++

　　使用Getters

　　要注意，在pinia中，Getters和state里面不能使用相同的名字

　　export const useStore = defineStore('main', {
　　state: () => ({
　　counter: 0,
　　}),
　　getters: {
　　doubleCount: (state) => state.counter * 2,
　　},
　　})

　　　　Actions

　　　定義和處理業務邏輯

　　export const useStore = defineStore('main', {
　　state: () => ({
　　counter: 0,
　　}),
　　actions: {
　　increment() {
　　this.counter++
　　},
　　randomizeCounter() {
　　this.counter = Math.round(100 * Math.random())
　　},
　　},
　　})

　　　　Pinia實戰-登錄狀態的管理

　　1、新建store文件，在下面index.ts中編輯pinia的使用：

　　2、在state中定義了isAuthenticated表示登錄狀態，對象user中存放登錄的用戶信息，初始狀態為空

　　在actions中進行定義，setAuth方法判斷isAuth的值控制用戶的登錄狀態，setUser方法將用戶的信息寫入user中

　　import { defineStore } from 'pinia'
　　import {userType} from '../utils/types'
　　export const useAuthStore = defineStore('auth', {
　　state: () => {
　　return { isAuthenticated:false,user: {} }
　　},
　　getters: {
　　getAuthenticated: (state) => state.isAuthenticated,
　　getUser: (state) => state.user,
　　},
　　actions: {
　　setAuth(isAuth:boolean){
　　if(isAuth){
　　this.isAuthenticated = isAuth;
　　}else {
　　this.isAuthenticated = false;
　　}
　　},
　　setUser(user: userType | null){
　　if(user){
　　this.user = user;
　　}else {
　　this.user = {}
　　}
　　}
　　},
　　})

　　定義好了pinia，然后去登錄界面使用

　　首先要引入我們在pinia中定義的東西

　　import { useAuthStore } from "../store";
　　const store = useAuthStore();

　　解析token之后，信息保存在decode之中，然后直接通過store的setAuth和setUser方法傳入對應的參數

　　// 解析token
　　const decode: userType = jwt_decode(token);
　　store.setAuth(!!decode);
　　store.setUser(decode);

　　　　效果實現

　　在沒有登錄的時候，也就是還沒有token，我們查看控制臺vue：

　　可以看到下圖登錄狀態為false，用戶信息user中也為空

　　然后我們點擊登錄，此時token已經保存，然后查看控制臺

　　可以看到，用戶的信息以及登錄狀態都獲取到了

　　　　同 vuex 的比較

　　Pinia 最初是為了探索 Vuex 下一次迭代可能會是什么樣子，結合了 Vuex 5 核心團隊討論中的許多想法。最終，我們意識到 Pinia 已經實現了我們在 Vuex 5 中想要的大部分內容，并決定實現它取而代之的是新的建議。

　　與 Vuex 相比，Pinia 提供了一個更簡單的 API，具有更少的操作，提供了 Composition-API 風格的 API，最重要的是，在與 TypeScript 一起使用時具有可靠的類型推斷支持。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/127605.html

Vue 實現網易云音樂 WebApp

摘要：基于等開發一款移動端音樂，界面參考了安卓版的網易云音樂布局適配常見移動端。圖標使用阿里巴巴圖標庫，中間的唱片旋轉動畫使用了實現。搜索功能實現功能搜索歌手歌單歌曲熱門搜索數據節流上拉刷新保存搜索記錄。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發一款移動端音樂 WebApp，UI ...

Karuru 2019-08-22 17:16 評論0 收藏0
Vue3實現刷新頁面局部內容的示例代碼

　　可以用實現局部組件（dom）的重新渲染可以實現頁面的局部刷新。有一個最簡單辦法，我們可以用Vue中的v-if指令來實現。　　我們的思路是：除了上述用Vue中的v-if指令來實現，我們也可以用另一個方法就是新建一個空白組件，需要刷新局部頁面時跳轉至這個空白組件頁面，然后在空白組件內的beforeRouteEnter守衛中又跳轉回原來的頁面。　　如下圖所示，在Vue3.X中不僅可以實現點擊刷新，按...

3403771864 2022-09-19 21:28 評論0 收藏0
vue全家桶網易嚴選,體驗網易嚴選購物流程

摘要：項目預覽線上訪問或者二維碼掃描項目描述全家桶模仿網易嚴選瀏覽，購物流程，好的生活，沒那么貴。對狀態管理有了進一步的了解在項目過程中每一個組件都應用了這個組件，切換的時候每次當前選中的選項都是第一項成選中狀態，究其原因的他們的狀態沒有共享。項目預覽 showImg(https://segmentfault.com/img/remote/1460000009660678?w=1481&h...

alaege 2019-08-20 17:02 評論0 收藏0
面向未來編程（Future-Oriented Programming），建設未來 Vue 生態

摘要：狀態管理社區當前最流行的狀態管理方案分別是單向數據流的和基于的。目前的現狀主要是由于并沒有將其底層的曝光出來。是一個開源項目，完全兼容的，擁簇面向未來編程，致力于加速未來生態圈的建設。概要 Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Function-based API。在 React 推出 Hooks 后不久，Vue 社區也迎來了自己的組件邏輯復用機制。 ...

J4ck_Chan 2019-08-23 18:12 評論0 收藏0