修改state中的状态

一、直接修改

在Pinia中，state里边的状态是可以直接修改的

<template>
  <div>
    <div>{{ userStore.username }}</div>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

// 修改username的值
const change = () => {
  userStore.username = '李四'
}
</script>

二、使用$patch传入一个对象进行批量修改

语法：

userStore.$patch({...})

<template>
  <div>
    <div>{{ userStore.username }}</div>
    <div>{{ userStore.age }}</div>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const change = () => {
  userStore.$patch({
    username: '李四',
    age: 18
  })
}
console.log(userStore);
</script>

<style lang='scss' scoped></style>

三、使用$patch传入一个函数进行批量修改

语法：

userStore.$patch((state) => {...})

<template>
  <div>
    <div>{{ userStore.username }}</div>
    <div>{{ userStore.age }}</div>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const change = () => {
  userStore.$patch(state => {
    state.username = '李四'
    state.age = 18
  })
}
console.log(userStore);
</script>

<style lang='scss' scoped></style>

四、替换整个state

语法：

userStore.$state = {...}

<template>
  <div>
    <div>{{ userStore.username }}</div>
    <div>{{ userStore.age }}</div>
    <div>{{ userStore.gender }}</div>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const change = () => {
  userStore.$state = {
    username: '李四',
    age: 18,
    gender: '女'
  }
}
console.log(userStore);
</script>

<style lang='scss' scoped></style>

五、通过actions修改

user.ts中定义一个actions：

import { defineStore } from 'pinia'
import { StoreNames } from '../namespaced.d'
import { store } from '../index'

export const useUserStore = defineStore(StoreNames.USER, {
  // 定义全局共享状态的一个初始化状态
  state: () => ({
    username: '张三',
    age: 20,
    gender: '男'
  }),
  // getters类似于computed计算属性，也具有缓存作用，用来修饰一些需要通过逻辑计算的值
  getters: {},
  // actions类似于methods，可以有同步和异步方法，修改state中的状态
  actions: {
    setUserName() {
      this.username = '李四'
    }
  }
})

// 方便在 setup() 外部使用 store
// 如果你需要在其他地方使用 store，你需要将原本被传递给应用 的 pinia 实例传递给 useStore() 函数
export function useUserStoreHook() {
  return useUserStore(store)
}

App.vue中使用：

<template>
  <div>
    <div>{{ userStore.username }}</div>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const change = () => {
  userStore.setUserName()
}
console.log(userStore);
</script>

<style lang='scss' scoped></style>

注：在state返回的对象，会自动挂载到本store的实例身上，可以在getter或actions中通过this来获取/修改state中的状态。

在actions中定义的函数不要使用箭头函数，防止this指向出现问题。