28 vue3 Pinia修改state的三种方法(直接修改，$patch，actions)

本篇记录vue3 使用pinia修改state的三种方法

1. 新建vue3项目，安装Pinia，不再详细描述。。。

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('接收到的参数===>', params)
            this.baseUrl = params
            this.ipList.push('192.168.10.100')
        }
    }
})

export default appStore

第一种修改方式：直接state = '数据'  ,不推荐

    const store = appStore()
    let {baseUrl, ipList} = storeToRefs(store)

    /*
    *  第一种修改方式：虽然可以直接修改，但是出于代码结构来说，
    *               全局的状态管理还是不要直接在各个组件处随意修改状态，
    *               应放于 action 中统一方法修改（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修改数据

    const store = appStore()
    // 第二种修改方式：使用$patch改变数据 $patch 可以同时修改多个值
    function changeDataByPatch() {
      /*
      $patch也有两种的调用方式
      第一种写法的在修改数组时，假如我只想要把 ipList 的中第2项改成‘192.168.10.222’，
      但是也需要传入整个包括所有元素的数组，这无疑增加了书写成本和风险，显然是不合理的，所以一般都推荐使用第二种传入一个函数的写法
      * */
      // 第一种 $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中的方法修改数据 （推荐）

    // 第三种修改方式：调用store中的action改变数据
    function changeDataByAction() {
      store.changeState('https://www.alibabagroup.com/cn/global/home')  //可以直接给actions里面的方法传递参数
    }

以上就是使用pinia修改数据的三种方法

pinia重置数据的功能，这个操作很简单

    const store = appStore()
    // 重置数据
    function resetData() {
      store.$reset()
    }

完整代码：

<template>
  <div>
    <strong>baseUrl：</strong>
    {{ baseUrl }}
  </div>
  <div>
    <strong>ipList：</strong>
    {{ ipList }}
  </div>
  <div>
    <button @click="changeData">直接在页面组件中改变数据</button>
    <button @click="changeDataByPatch">使用$patch改变数据</button>
    <button @click="changeDataByAction">使用action改变数据</button>
    <button @click="resetData">重置数据</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)

    /*
    *  第一种修改方式：虽然可以直接修改，但是出于代码结构来说，
    *               全局的状态管理还是不要直接在各个组件处随意修改状态，
    *               应放于 action 中统一方法修改（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改变数据 $patch 可以同时修改多个值
    function changeDataByPatch() {
      /*
      $patch也有两种的调用方式
      第一种写法的在修改数组时，假如我只想要把 ipList 的中第2项改成‘192.168.10.222’，
      但是也需要传入整个包括所有元素的数组，这无疑增加了书写成本和风险，显然是不合理的，所以一般都推荐使用第二种传入一个函数的写法
      * */
      // 第一种 $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'
      })
    }

    // 第三种修改方式：调用store中的action改变数据
    function changeDataByAction() {
      store.changeState('https://www.alibabagroup.com/cn/global/home')  //可以直接给actions里面的方法传递参数
    }

    // 重置数据
    function resetData() {
      store.$reset()
    }

    return {
      baseUrl,
      ipList,
      changeData,
      changeDataByPatch,
      changeDataByAction,
      resetData
    }
  }
}
</script>