小白了解Pinia第1集 · 快速入门以及状态State

全文参考pinia中文官网，对官网的知识作了一个小笔记，仅供自用。并且结合公司实际项目进行整理与学习，请各位小伙伴指正~
pinia中文官网链接：http://pinia.cc/docs/introduction.html

Pinia介绍

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

安装方式

yarn add pinia
# or with npm
npm install pinia

Vue3 创建一个 pinia 实例（根存储）并将其作为插件传递给应用程序：

//main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

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

app.mount('#app')

如果您使用的是 Vue 2，您还需要安装一个插件并将创建的 pinia 注入应用程序的根目录：

//main.js
import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // other options...
  // ...
  // 请注意，可以在同一页面上的多个 Vue 应用程序中使用相同的 `pinia` 实例
  pinia,
})

核心概念

//store/auth.js
import { defineStore } from 'pinia'

//defineStore() 的第一个参数是应用程序中商店的唯一 id
//defineStore() 的第二个参数接受两个不同的值：Setup 函数或 Options 对象。
export const useStore = defineStore('auth', {
  // other options...
})

在实际项目中了解 ，如下图。
此图是Option Stores。与 Vue 的 Options API 类似，我们也可以传递带有 state、actions 和 getters 属性的 Options 对象。

Setup Stores
我们可以传入一个定义响应式属性和方法的函数，并返回一个带有属性和 我们要公开的方法。

export const useCounterStore = defineStore('counter', () => {

	//ref() 成为 state 的属性
  const count = ref(0)
  const name = ref('Eduardo')
  
  //computed() 变成 getters
  const doubleCount = computed(() => count.value * 2)
  
  //function() 变成 actions
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})

相比而言我更喜欢Option stores，感觉直观且易于上手。

状态 State

定义状态 State

使用state

重置状态 $reset()

您可以通过调用 authStore上的 $reset() 方法将状态 reset 到其初始值：

import {auth} from "@/store/auth";

const authStore = auth();

authStore.$reset()

可修改状态 （看不懂~~）

如果您希望能够写入这些状态属性（例如，如果您有一个表单），您可以使用 mapWritableState() 代替。 请注意，您不能传递类似于 mapState() 的函数：

import { mapWritableState } from 'pinia'
import { useCounterStore } from '../stores/counter'

export default {
  computed: {
    // 允许访问组件内部的 this.count 并允许设置它
    // this.count++ 与从 store.count 中读取相同
    ...mapWritableState(useCounterStore, ['count'])
    // 与上面相同，但将其注册为 this.myOwnName
    ...mapWritableState(useCounterStore, {
      myOwnName: 'count',
    }),
  },
}

改变状态

除了直接用 authStore.count++ 修改 authStore，你还可以调用 $patch 方法。 它允许您使用部分“状态”对象同时应用多个更改：

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

但是，使用这种语法应用某些突变非常困难或代价高昂：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要您创建一个新集合。 正因为如此，$patch 方法也接受一个函数来分组这种难以用补丁对象应用的突变：（看不懂哇~~）

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

替换状态

您不能完全替换 authStore的状态，因为这会破坏反应性。 但是，您可以_patch it_：

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

您还可以通过更改 pinia 实例的 state 来设置整个应用程序的初始状态。 这在 SSR 水合 期间使用。

pinia.state.value = {}

本来想一次性学完的，但是要想真正了解pinia，真的很费脑子，脑子不够用了，先缓缓吧~