Pinia的基本使用

定义store

• 必须使用响应式数据才不会丢失

import { ref } from 'vue'
import { defineStore } from 'pinia'

// 公共数据
export const useShareStore = defineStore('share', () => {
  let selectTime = ref('')

  //也可以用这种方式更新数据，但是好像监听不到数据改变
  const updateTime = (time) => {
    console.log(time, '查询时间改变---')
    selectTime.value = time
  }

  return { selectTime, updateTime }
})

访问state

• 默认情况下，你可以通过 store 实例访问 state，直接对其进行读写。

import { useShareStore } from '@/stores/index'
const shareStore = useShareStore()
const transInfo = reactive({
  time: shareStore.selectTime
})

重置state

• 使用选项式 API 时，你可以通过调用 store 的 $reset() 方法将 state 重置为初始值。

const store = useStore()

store.$reset()

变更 state

• 可以调用 $patch 方法。它允许你用一个 state 的补丁对象在同一时间更改多个属性

store.$patch({
  count: store.count + 1,
  age: 120,
  name: 'DIO',
})

• $patch 方法也接受一个函数来组合这种难以用补丁对象实现的变更。

store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

替换 state

• 你不能完全替换掉 store 的 state，因为那样会破坏其响应性。但是，你可以 patch 它。

// 这实际上并没有替换`$state`
store.$state = { count: 24 }
// 在它内部调用 `$patch()`：
store.$patch({ count: 24 })

• 你也可以通过变更 pinia 实例的 state 来设置整个应用的初始 state。这常用于 SSR 中的激活过程。

订阅 state

cartStore.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  mutation.type // 'direct' | 'patch object' | 'patch function'
  // 和 cartStore.$id 一样
  mutation.storeId // 'cart'
  // 只有 mutation.type === 'patch object'的情况下才可用
  mutation.payload // 传递给 cartStore.$patch() 的补丁对象。

  // 每当状态发生变化时，将整个 state 持久化到本地存储。
  localStorage.setItem('cart', JSON.stringify(state))
})

• 如果你想在组件卸载后依旧保留它们，请将 { detached: true } 作为第二个参数，以将 state subscription 从当前组件中分离：

<script setup>
const someStore = useSomeStore()
// 此订阅器即便在组件卸载之后仍会被保留
someStore.$subscribe(callback, { detached: true })
</script>