zqy233的前端学习笔记

主题

回到顶部
索引

pinia

https://pinia.vuejs.org/zh/introduction.html

pinia是vue生态里vuex的代替者，一个全新状态管理库，pinia相较于vuex的优势：

  1. vue2和vue3都可以很好的支持
  2. 抛弃了mutations的操作，只有state、getters和actions，简化了状态管理库的使用，让代码编写更加容易直观
  3. 不需要嵌套模块，符合vue3的composition api，让代码更加扁平化
  4. 完整的TypeScript支持
  5. 代码更加简洁，可以实现很好的代码自动分割。vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，Vue3的Composition api完美了解决这个问题。 可以实现代码分割，pinia也同样继承了这个优点

可以简单总结pinia的优势就是，更加简洁的语法，支持vue3的composition api和对typescript的支持

安装

sh
pnpm add pinia

pnpm add pinia

src/main.ts

ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia' 

// 创建pinia实例
const pinia = createPinia()

// 挂载到Vue根实例上
const app =createApp(App)
app.use(pinia).mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia' 

// 创建pinia实例
const pinia = createPinia()

// 挂载到Vue根实例上
const app =createApp(App)
app.use(pinia).mount('#app')

Vue 2，还需要安装插件

Vue 2 中，Pinia 使用的是 Vuex 的现有接口 (因此不能与 Vuex 一起使用)

ts
import { createPinia, PiniaVuePlugin } from 'pinia'

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

new Vue({
  el: '#app',
  // 其他配置...
  // ...
  // 请注意，同一个`pinia'实例
  // 可以在同一个页面的多个 Vue 应用中使用。 
  pinia,
})

import { createPinia, PiniaVuePlugin } from 'pinia'

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

new Vue({
  el: '#app',
  // 其他配置...
  // ...
  // 请注意，同一个`pinia'实例
  // 可以在同一个页面的多个 Vue 应用中使用。 
  pinia,
})

Store 是什么？

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods

应该在什么时候使用 Store

一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单

另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性

并非所有的应用都需要访问全局状态，但如果你的应用确实需要一个全局状态，那 Pinia 将使你的开发过程更轻松

定义store

Store 是用 defineStore() 方法定义的，需要两个参数

  • 它的第一个参数要求是一个独一无二的名字，这个名字 ，也被用作 id ，是必须传入的， Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法，将返回的函数命名为 use... 是一个符合组合式函数风格的约定
  • defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象

创建src/store/index.ts文件

ts
import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

Option Store

与 Vue 的选项式 API 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象

ts
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})


export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。

为方便上手使用，Option Store 应尽可能直观简单

Setup Store

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象

js
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})


export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

在 Setup Store 中：

  • ref() 就是 state 属性
  • computed() 就是 getters
  • function() 就是 actions

Setup store 比 Option Store 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何组合式函数。不过，请记住，使用组合式函数会让 SSR 变得更加复杂

使用 Store

虽然我们前面定义了一个 store，但在我们使用 <script setup> 调用 useStore()(或者使用 setup() 函数，像所有的组件那样) 之前，store 实例是不会被创建的：

vue
<script setup>
import { useCounterStore } from '@/stores/counter'
// access the `store` variable anywhere in the component ✨
const store = useCounterStore()
</script>

<script setup>
import { useCounterStore } from '@/stores/counter'
// access the `store` variable anywhere in the component ✨
const store = useCounterStore()
</script>

你可以定义任意多的 store，但为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断)，你应该在不同的文件中去定义 store

一旦 store 被实例化，你可以直接访问在 store 的 state、getters 和 actions 中定义的任何属性

请注意，store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value，就像 setup 中的 props 一样，如果写了，也不能解构：

vue
<script setup>
const store = useCounterStore()
// ❌ This won't work because it breaks reactivity
// it's the same as destructuring from `props`
const { name, doubleCount } = store 
name // will always be "Eduardo" 
doubleCount // will always be 0 
setTimeout(() => {
  store.increment()
}, 1000)
// ✅ this one will be reactive
// 💡 but you could also just use `store.doubleCount` directly
const doubleValue = computed(() => store.doubleCount)
</script>

<script setup>
const store = useCounterStore()
// ❌ This won't work because it breaks reactivity
// it's the same as destructuring from `props`
const { name, doubleCount } = store 
name // will always be "Eduardo" 
doubleCount // will always be 0 
setTimeout(() => {
  store.increment()
}, 1000)
// ✅ this one will be reactive
// 💡 but you could also just use `store.doubleCount` directly
const doubleValue = computed(() => store.doubleCount)
</script>

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。请注意，你可以直接从 store 中解构 action，因为它们也被绑定到 store 上：

vue
<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` and `doubleCount` are reactive refs
// This will also extract refs for properties added by plugins
// but skip any action or non reactive (non ref/reactive) property
const { name, doubleCount } = storeToRefs(store)
// the increment action can just be destructured
const { increment } = store
</script>

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` and `doubleCount` are reactive refs
// This will also extract refs for properties added by plugins
// but skip any action or non reactive (non ref/reactive) property
const { name, doubleCount } = storeToRefs(store)
// the increment action can just be destructured
const { increment } = store
</script>

TypeScript支持

并不需要做太多努力就能使 state 兼容 TS。 Pinia 会自动推断出 state 的类型，但在一些情况下，得用一些方法来帮它一把

ts
const useStore = defineStore('storeId', {
  state: () => {
    return {
      // 用于初始化空列表
      userList: [] as UserInfo[],
      // 用于尚未加载的数据
      user: null as UserInfo | null,
    }
  },
})

interface UserInfo {
  name: string
  age: number
}

const useStore = defineStore('storeId', {
  state: () => {
    return {
      // 用于初始化空列表
      userList: [] as UserInfo[],
      // 用于尚未加载的数据
      user: null as UserInfo | null,
    }
  },
})

interface UserInfo {
  name: string
  age: number
}

或者，可以用一个接口定义 state，并添加 state() 的返回值的类型

ts
interface State {
  userList: UserInfo[]
  user: UserInfo | null
}

const useStore = defineStore('storeId', {
  state: (): State => {
    return {
      userList: [],
      user: null,
    }
  },
})

interface UserInfo {
  name: string
  age: number
}

interface State {
  userList: UserInfo[]
  user: UserInfo | null
}

const useStore = defineStore('storeId', {
  state: (): State => {
    return {
      userList: [],
      user: null,
    }
  },
})

interface UserInfo {
  name: string
  age: number
}

访问 state

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

vue
<template>
  <h2>{{ store.count }}</h2>
  <button @click="add">增加</button>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/stores/index'
const store = useCounterStore()
const add = () => {
  store.count++
}
</script>

<template>
  <h2>{{ store.count }}</h2>
  <button @click="add">增加</button>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/stores/index'
const store = useCounterStore()
const add = () => {
  store.count++
}
</script>

解构赋值 storeToRefs()

为了从 store 中提取属性时保持其响应性，需要使用 storeToRefs()。它将为每一个响应式属性创建引用

vue
<template>
  <h2>{{ store.count }}</h2>
  <button @click="add">增加</button>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/index'
const store = useCounterStore()
let { count } = storeToRefs(store)
const add = () => {
  count.value++
}
const reset = () => {
  store.$reset()
}
</script>

<template>
  <h2>{{ store.count }}</h2>
  <button @click="add">增加</button>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/index'
const store = useCounterStore()
let { count } = storeToRefs(store)
const add = () => {
  count.value++
}
const reset = () => {
  store.$reset()
}
</script>

重置 state

ts
<template>
  <h2>{{ count }}</h2>
  <button @click="add">增加</button>
  <button @click="reset">重置</button>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/index'
const store = useCounterStore()
let { count } = storeToRefs(store)
const add = () => {
  count.value++
}
const reset = () => {
  store.$reset()
}
</script>

<template>
  <h2>{{ count }}</h2>
  <button @click="add">增加</button>
  <button @click="reset">重置</button>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/index'
const store = useCounterStore()
let { count } = storeToRefs(store)
const add = () => {
  count.value++
}
const reset = () => {
  store.$reset()
}
</script>

修改数据

store数据增加一个count，\src\store\index.ts文件如下

ts
state:()=>{
  return {
    count:0
  }
},

state:()=>{
  return {
    count:0
  }
},

新建两个组件，在一个组件里修改状态数据，观察另一个组件中的数据是否会改变

在\components\文件夹下新建一个组件

vue
<template>
  <h2 class="">{{ store.count }}</h2>
</template>

<script lang="ts" setup>
import { mainStore } from "@/store/index";
const store = mainStore();
</script>

<template>
  <h2 class="">{{ store.count }}</h2>
</template>

<script lang="ts" setup>
import { mainStore } from "@/store/index";
const store = mainStore();
</script>

在components\文件夹下新建另一个组件

vue
<template>
  <button @click="handleClick">点击增加</button>
</template>

<script lang="ts" setup>
import { mainStore } from "@/store/index";
const store = mainStore()

const handleClick = () => {
  store.count++
};
</script>

<style lang="scss" scoped></style>

<template>
  <button @click="handleClick">点击增加</button>
</template>

<script lang="ts" setup>
import { mainStore } from "@/store/index";
const store = mainStore()

const handleClick = () => {
  store.count++
};
</script>

<style lang="scss" scoped></style>

app.vue中使用这两个组件

jsx
<template>
  <storeData></storeData>
  <addButton></addButton>
</template>

<template>
  <storeData></storeData>
  <addButton></addButton>
</template>

解构赋值的坑

这样解构是没有作用的

jsx
<template>
  <h2 class="">{{ store.count }}</h2>
  <hr />
  <h2 class="">{{ count }}</h2>
</template>

<script lang="ts" setup>
import { mainStore } from "../store/index"
const store = mainStore()
const { count } = store
</script>

<template>
  <h2 class="">{{ store.count }}</h2>
  <hr />
  <h2 class="">{{ count }}</h2>
</template>

<script lang="ts" setup>
import { mainStore } from "../store/index"
const store = mainStore()
const { count } = store
</script>

正确的解构方式

jsx
<template>
  <h2>{{ count }}</h2>
</template>

<script lang="ts" setup>
import { mainStore } from "../store/index"
import { storeToRefs } from "pinia"
const { count } = storeToRefs(mainStore())
</script>

<template>
  <h2>{{ count }}</h2>
</template>

<script lang="ts" setup>
import { mainStore } from "../store/index"
import { storeToRefs } from "pinia"
const { count } = storeToRefs(mainStore())
</script>

修改数据的另外三种方式

修改多条数据，建议使用$patch的方法，pinia的官方文档明确表示$patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处

一，使用对象的写法

js
const handleClickPatch = () => {
  store.$patch({
    count: store.count + 2,
    state.helloWorld = state.helloWorld === "hello" ? "world" : "hello"
  })
}

const handleClickPatch = () => {
  store.$patch({
    count: store.count + 2,
    state.helloWorld = state.helloWorld === "hello" ? "world" : "hello"
  })
}

二，使用函数的写法

js
const handleClickMethod = () => {
  store.$patch((state) => {
    state.count++
    state.helloWorld = state.helloWorld === "hello" ? "world" : "hello";
  })
}

const handleClickMethod = () => {
  store.$patch((state) => {
    state.count++
    state.helloWorld = state.helloWorld === "hello" ? "world" : "hello";
  })
}

三，使用actions

typescript
actions:{
    changeState(){
        this.count++
        this.helloWorld='hello'
    }
  }

actions:{
    changeState(){
        this.count++
        this.helloWorld='hello'
    }
  }
js
const handleClickActions = ()=>{
  store.changeState()
}

const handleClickActions = ()=>{
  store.changeState()
}

getters

和vue中的计算属性几乎一样，就是在获取state的值时作一些处理，值得一提的是，getters具有缓存特性

js
getters:{
    phoneHidden(state){
      return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
    }
  }

getters:{
    phoneHidden(state){
      return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
    }
  }

多个store

typescript
import { defineStore } from "pinia"

const otherStore = defineStore("other", {
  state: () => {
    return {
      count: 0
    }
  }
})

export const mainStore = defineStore("main", {
  state: () => {
    return {
      hello: "world"
    }
  },
  getters: {
    doubleCount: () => otherStore().count * 2
  },
  actions: {
    add() {
      otherStore().count++
    }
  }
})

import { defineStore } from "pinia"

const otherStore = defineStore("other", {
  state: () => {
    return {
      count: 0
    }
  }
})

export const mainStore = defineStore("main", {
  state: () => {
    return {
      hello: "world"
    }
  },
  getters: {
    doubleCount: () => otherStore().count * 2
  },
  actions: {
    add() {
      otherStore().count++
    }
  }
})

vue-devtools调试pinna

安装vue-devtools插件，f12调试项目，可以查看pinia数据

Released under the MIT License.

Copyright © 2022.4-2024.5