首页 资源列表 文章列表

vue3使用Pinia修改state的方法

import {defineStore} from "pinia"
  
const appStore = defineStore('appStore', {
    state: () => ({
        baseUrl: 'https://www.baidu.com/',       
    }),
    actions: {
        changeState(params) {
            console.log('接收到的参数===>', params)
            this.baseUrl = params           
        }
    }
})
  
export default appStore

修改方式:直接state = '数据'  ,不推荐

    const store = appStore()
    let {baseUrl} = storeToRefs(store)
 
    /*
    *  第一种修改方式:虽然可以直接修改,但是出于代码结构来说,
    *               全局的状态管理还是不要直接在各个组件处随意修改状态,
    *               应放于 action 中统一方法修改(piain没有mutation)
    *               并不推荐!!!
    * */
    function changeData() {
      // baseUrl = 'https://www.taobao.com/'  //error 这么写是没有用的
      store.baseUrl = 'https://www.taobao.com/'  //success     
    }

修改方式:使用$patch修改数据

    const store = appStore()
    // 第二种修改方式:使用$patch改变数据 $patch 可以同时修改多个值
    function changeDataByPatch() {
      /*
      $patch也有两种的调用方式
      第一种写法的在修改数组时,假如我只想要把 ipList 的中第2项改成‘192.168.10.222',
      但是也需要传入整个包括所有元素的数组,这无疑增加了书写成本和风险,显然是不合理的,所以一般都推荐使用第二种传入一个函数的写法
      * */  
 
      // 第二种 $patch方法
      store.$patch((state) => {
        state.baseUrl = 'https://www.jd.com/'       
      })
    }

修改方式:使用actions中的方法修改数据 (推荐)

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


0.125709s