pinia 修改state

<template>
<div @click="change">
  直接通过实例.就可以获取
  {{ store.count }}---- {{ store.sex }}
</div>
</template>

<script setup lang='ts'>
import { useStore } from '../store'
// defineStore返回的是个hook，需要实例化
const store = useStore()
const change = () => {
  // 第一种方式，直接修改
  // store.count++

  // 第二种方式，通过patch的对象修改
  // store.$patch({ count: 3 })

  // 第三种方式，通过patch的函数修改
  // store.$patch((state) => {
  //   state.count = 3
  // })

  // 第四种方式，通过$state修改
  // store.$state.count = 3

  // 第五种方式，通过$state赋值会完全覆盖，且属性必须完全一致
  // store.$state = {
  //   count:4,
  //   sex:'男'
  // }

  // 第六种方式，通过调用action的方式
  // store.increment()
  store.updataCount(5) // 通过传参的方式
}
</script>

<style scoped lang='scss'>

</style>

import {defineStore} from 'pinia'
import {StoreName} from './store-name'
// StoreName是id，用于区分不同的store，自定义即可
export const useStore = defineStore(StoreName.Test, {
  state: () => ({
    count: 0,
    sex: '顶顶顶'
  }),
  getters: {

  },
  actions: {
    increment() {
      this.count++
    },
    // 不可以写箭头函数，否则指向不正确
    updataCount(count: number) {
      this.count = count
    }
  },
})