快捷導航

vue3使用Pinia修改state的三種方法(直接修改，$patch，actions)

更新時間：2024年03月13日 09:56:45 作者：Jay丶蕭邦

Vue3?Pinia是一個狀態(tài)管理庫,專門為Vue3設(shè)計優(yōu)化,它提供了一種簡單而強大的方式來管理應(yīng)用程序的狀態(tài),并且與Vue3的響應(yīng)式系統(tǒng)緊密集成,本文給大家介紹了vue3使用Pinia修改state的三種方法,需要的朋友可以參考下

本篇記錄vue3 使用pinia修改state的三種方法

1. 新建vue3項目，安裝Pinia(參考鏈接：Vue狀態(tài)管理工具Pinia的安裝與使用教程_vue.js_腳本之家 (jb51.net))

2.目錄

app.js

import {defineStore} from "pinia"
 
const appStore = defineStore('appStore', {
    state: () => ({
        baseUrl: 'https://www.baidu.com/',
        ipList: ['192.168.10.777', '192.168.10.999', '192.168.10.888']
    }),
    actions: {
        changeState(params) {
            console.log('接收到的參數(shù)===>', params)
            this.baseUrl = params
            this.ipList.push('192.168.10.100')
        }
    }
})
 
export default appStore

第一種修改方式：直接state = '數(shù)據(jù)' ,不推薦

    const store = appStore()
    let {baseUrl, ipList} = storeToRefs(store)
 
    /*
    *  第一種修改方式：雖然可以直接修改，但是出于代碼結(jié)構(gòu)來說，
    *               全局的狀態(tài)管理還是不要直接在各個組件處隨意修改狀態(tài)，
    *               應(yīng)放于 action 中統(tǒng)一方法修改（piain沒有mutation）
    *               并不推薦?。?！
    * */
    function changeData() {
      // baseUrl = 'https://www.taobao.com/'  //error 這么寫是沒有用的
      store.baseUrl = 'https://www.taobao.com/'  //success
      store.ipList.push('192.168.10.111')  //success
    }

第二種修改方式：使用$patch修改數(shù)據(jù)

    const store = appStore()
    // 第二種修改方式：使用$patch改變數(shù)據(jù) $patch 可以同時修改多個值
    function changeDataByPatch() {
      /*
      $patch也有兩種的調(diào)用方式
      第一種寫法的在修改數(shù)組時，假如我只想要把 ipList 的中第2項改成‘192.168.10.222'，
      但是也需要傳入整個包括所有元素的數(shù)組，這無疑增加了書寫成本和風險，顯然是不合理的，所以一般都推薦使用第二種傳入一個函數(shù)的寫法
      * */
      // 第一種 $patch方法
      // store.$patch({
      //   baseUrl: 'https://www.jd.com/',
      //   ipList: ['192.168.10.777', '192.168.10.222', '192.168.10.888']
      // })
 
      // 第二種 $patch方法
      store.$patch((state) => {
        state.baseUrl = 'https://www.jd.com/'
        state.ipList[0] = '192.168.10.222'
      })
    }

第三種修改方式：使用actions中的方法修改數(shù)據(jù) （推薦）

    // 第三種修改方式：調(diào)用store中的action改變數(shù)據(jù)
    function changeDataByAction() {
      store.changeState('https://www.alibabagroup.com/cn/global/home')  //可以直接給actions里面的方法傳遞參數(shù)
    }

以上就是使用pinia修改數(shù)據(jù)的三種方法

pinia重置數(shù)據(jù)的功能，這個操作很簡單

    const store = appStore()
    // 重置數(shù)據(jù)
    function resetData() {
      store.$reset()
    }

完整代碼：

<template>
  <div>
    <strong>baseUrl：</strong>
    {{ baseUrl }}
  </div>
  <div>
    <strong>ipList：</strong>
    {{ ipList }}
  </div>
  <div>
    <button @click="changeData">直接在頁面組件中改變數(shù)據(jù)</button>
    <button @click="changeDataByPatch">使用$patch改變數(shù)據(jù)</button>
    <button @click="changeDataByAction">使用action改變數(shù)據(jù)</button>
    <button @click="resetData">重置數(shù)據(jù)</button>
  </div>
</template>
 
<script>
import appStore from "@/store/app"
import {storeToRefs} from "pinia"
 
export default {
  name: "Home",
  setup() {
    const store = appStore()
    let {baseUrl, ipList} = storeToRefs(store)
 
    /*
    *  第一種修改方式：雖然可以直接修改，但是出于代碼結(jié)構(gòu)來說，
    *               全局的狀態(tài)管理還是不要直接在各個組件處隨意修改狀態(tài)，
    *               應(yīng)放于 action 中統(tǒng)一方法修改（piain沒有mutation）
    *               并不推薦！??！
    * */
    function changeData() {
      // baseUrl = 'https://www.taobao.com/'  //error 這么寫是沒有用的
      store.baseUrl = 'https://www.taobao.com/'  //success
      store.ipList.push('192.168.10.111')  //success
    }
 
    // 第二種修改方式：使用$patch改變數(shù)據(jù) $patch 可以同時修改多個值
    function changeDataByPatch() {
      /*
      $patch也有兩種的調(diào)用方式
      第一種寫法的在修改數(shù)組時，假如我只想要把 ipList 的中第2項改成‘192.168.10.222'，
      但是也需要傳入整個包括所有元素的數(shù)組，這無疑增加了書寫成本和風險，顯然是不合理的，所以一般都推薦使用第二種傳入一個函數(shù)的寫法
      * */
      // 第一種 $patch方法
      // store.$patch({
      //   baseUrl: 'https://www.jd.com/',
      //   ipList: ['192.168.10.777', '192.168.10.222', '192.168.10.888']
      // })
 
      // 第二種 $patch方法
      store.$patch((state) => {
        state.baseUrl = 'https://www.jd.com/'
        state.ipList[0] = '192.168.10.222'
      })
    }
 
    // 第三種修改方式：調(diào)用store中的action改變數(shù)據(jù)
    function changeDataByAction() {
      store.changeState('https://www.alibabagroup.com/cn/global/home')  //可以直接給actions里面的方法傳遞參數(shù)
    }
 
    // 重置數(shù)據(jù)
    function resetData() {
      store.$reset()
    }
 
    return {
      baseUrl,
      ipList,
      changeData,
      changeDataByPatch,
      changeDataByAction,
      resetData
    }
  }
}
</script>

以上就是vue3使用Pinia修改state的三種方法(直接修改，$patch，actions)的詳細內(nèi)容，更多關(guān)于vue3 Pinia修改state的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: