pinia 修改state的方式

4,613 阅读1分钟

pinia内部修改

this

import { defineStore } from 'pinia'
export const useUserStore = defineStore('profile', {
  state() {
    return {
      userName: '123456',
      phone: '123456',
    }
  },
  actions: {  // 和vue中的methods一样
    updatePhone(newPhone) {
      this.phone = newPhone // 可以使用this访问和修改state中的数据
    },
  },
})

使用$patch同时修改多个值

this.$patch({
  userName: '123456',
  phone: '123456',
})

pinia外部修改

state直接修改(不推荐)

const userStore = useUserStore()
function updatePhone(newPhone) {
   userStore.phone = newPhone // 可以使用this访问和修改state中的数据
},

$patch修改

//方法一
userStore.$patch({
  userName: '123456',
  phone: '123456',
})
//方法二
userStore.$patch((state)=>{
  state.userName = '123456',
  state.phone = '123456',
})

通过action修改(推荐)

function updatePhone(newPhone) {
   userStore.updatePhone(newPhone)
}

ps

pinia重置数据的功能

userStore.$reset()