define

// ts or js 
import { defineStore } from 'pinia'
import pages from '../pages.json'
// 命名规范 最好使用 use
export const useMainStore = defineStore('main', {
  state: () => {
    return {
      // 定义 state 的内容
      homePath: '/home'
    }
  },
  getters: {},
  actions: {
  }
})

use

// 记得先在 main.ts 中导入 pinia
<script lang="ts">
import { mainStore } from '@/stores/MainStore'
import { mapState } from 'pinia'

export default {
  name: 'TwTabbar',
  data() {
    return {
      cur: ''
    }
  },
  computed: {
    ...mapState(mainStore, {
      tabBar: 'tabBar',
      curIndex: 'tabBarIndex'
    })
  },
  methods: {
    
  }
}
</script>

修改 state

直接修改

在 setup 中直接修改。

patch

可以修改指定的值，不用修改整个对象。

<script setup lang='ts'>
  import { Xxxx } from './store'

  Xxx.$patch({
    aaa: 111,
    bbb: 'sdsa'
  })

  Xxx.$patch((state) => {
    state.aaa = 222,
    state.bbb = 'cccc'
  })
</script>

$state

必须修改整个对象，不能单独修改某一个值

<script setup lang='ts'>
  import { Xxxx } from './store'

  Xxx.$state({
    // 必须对 state 对象里面的元素进行赋值 ！！！
    aaa: 111,
    bbb: 'sdsa'
  })

</script>

通过 action 修改

在 pinia 文件中定义 action 。可以传参。

注意 'storeToRefs' 的使用，不然无法实现 pinia 响应式数据。

// Xxxx.ts
import { defineStore } from 'pinia'
export const useXxxxStore = defineStore('xxxx', {
  state: () => {
    return {
      aaa: '/pages/documents/home',
      bbb: 50
    }
  },
  getters: {},
  actions: {
    changeA(str:String) {
      this.aaa = str
    },
    changeB(num:Number) {
      this.bbb = num
    }
  }
})

// Xxxx.vue
<template>
  <view class="content">
    <view>原始调用: {{ Xxxx.aaa }} {{ Xxxx.bbb }}</view>
    <view>本组件 setup pinia 调用: {{ aaa }} {{ bbb }}</view>
    <button @click="changeA">改变a</button>
    <button @click="changeB">改变b</button>
  </view>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useXxxxStore } from '@/stores/Xxxx'
const Xxxx = useXxxxStore()
const { aaa, bbb } = storeToRefs(useXxxxStore())

const changeA = () => {
  Xxxx.$patch({
    aaa: '123123123123'
  })
}

const changeB = () => {
  // Xxxx.bbb++
  // Xxxx.$patch((state) => {
  //   state.bbb++
  // })
  Xxxx.changeB(900)
}

</script>

pinia 数据响应式

pinia 结构不具有响应式，直接使用 pinia 对象发生更新时，无法直接实时渲染，因此需要使用 storeToRefs 。