pinia基础知识

1. pinia是什么?

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

2. 为什么使用pinia?

如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

• dev-tools 支持

• 跟踪动作、突变的时间线

• Store 出现在使用它们的组件中

• time travel 和 更容易的调试

• 热模块更换

• 在不重新加载页面的情况下修改您的 Store

• 在开发时保持任何现有状态

• 插件：使用插件扩展 Pinia 功能

• 为 JS 用户提供适当的 TypeScript 支持或 autocompletion

• 服务器端渲染支持

3. pinia基础特性

1、State

（1）默认情况下，通过 store 实例访问 state，可以直接读取和写入，如 @click="store.count++"

（2）通过 store.$reset() 方法可以将 state 重置为初始值。

（3）除了直接通过 store 修改 state，还可以通过 store.$patch() 方法提交多个更改。

（4）可以通过 store.$subscribe() 订阅 State 的变化，在 patches 修改之后订阅只会触发一次。默认情况下，订阅绑定到添加它的

组件，当组件卸载时，它们将自动删除，也可以配置将其保留。

2、Getters

（1）Getters 属性的值是一个函数，接受 state 作为第一个参数，目的是鼓励使用箭头函数

（2）非箭头函数会绑定 this，建议仅在需要获取整个 store 实例的场景使用，且需要显式定义函数返回类型

3、Actions

（1）与 Gettes 一样可以通过 this 访问整个 store 实例

（2）Actions 可以是异步的或同步的，不管怎样，都会返回一个 Promise

（3）Actions 可以自由的设置参数和返回的内容，一切将自动推断，不需要定义 TS 类型

（4）与 State 一样，可以通过 store.$onAction() 订阅 Actions，回调将在执行前触发，并可以通过参数 after() 和 onError() 允许在Action 决议后和拒绝后执行函数。同样的，订阅绑定的是当前组件。

4. 基本使用 

4.1.store/counter.js

import {ref} from 'vue'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0) //定义状态 count
  function increment() { // 定义改变状态的方法
    count.value++
  }
// 导出状态与方法
  return { count, increment }

})

4.2.main.js

import { createPinia } from 'pinia'
app.use(createPinia())

4.3.在组件中的使用

// 导入仓库
import { useCounterStore } from '@/stores/counter'
// 生成仓库
const counter = useCounterStore()
// 更新仓库
counter.count++
counter.increment()

5. state -变更

除了用 store.count++ 直接改变 store，你还可以调用 $patch 方法 

store.$patch({
  count: store.count + 1,
  age: 120,
  })
你还可以调用 $patch 方法 ，引用类型
store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

6.state-替换

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

//or
pinia.state.value = {}

7.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 })

你可以在 pinia 实例上侦听整个 state。

watch(
  pinia.state,
  (state) => {
    // 每当状态发生变化时，将整个 state 持久化到本地存储。
    localStorage.setItem('piniaState', JSON.stringify(state))
  },
  { deep: true }
)