Pinia 入门指南:Vue3 状态管理的新解决方案

1. 引入 Pinia

main.js 中引入 Pinia

import { createPinia } from 'pinia'

const pinia = createPinia()
app.use(pinia)

2. 定义 Store

定义一个 Store

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

// 选项式配置
export const userCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    count() {
      return this.count
    },
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

// 函数式配置
export const userCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
})

3. 在组件中使用

<script setup>
  import { useCounterStore } from '@/stores/counter'

  const counterStore = useCounterStore()
  // 以下三种方式都会被 devtools 跟踪
  counterStore.count++
  counterStore.$patch({ count: counterStore.count + 1 })
  counterStore.increment()
</script>

<template>
  <div>{{ counterStore.count }}</div>
  <div>{{ counterStore.doubleCount }}</div>
</template>

4. 响应式

由于 store 是一个用 reactive 包裹的对象,直接解构会失去响应性。可以使用需要用 storeToRefs 方法包裹 store 对象,如

<script setup>
  import { storeToRefs } from 'pinia'
  import { useCounterStore } from '@/stores/counter'

  const counterStore = useCounterStore()
  const { count, doubleCount } = storeToRefs(counterStore)
</script>

<template>
  <div>{{ count }}</div>
  <div>{{ doubleCount }}</div>
</template>

5. 修改状态

修改 store 状态可以直接调用 store 的方法,也可以调用 $patch 方法进行修改

<script setup>
  import { useCounterStore } from '@/stores/counter'

  const counterStore = useCounterStore();

  counterStore.increment()

  // 参数类型1:对象
  counterStore.$patch({
    name: hello pingan8787 ,
    age: 18 ,
    addr: xiamen ,
  })

  // 参数类型2:方法,该方法接收 store 中的 state 作为参数
  counterStore.$patch(state => {
    state.name = hello pingan8787 ;
    state.age = 18 ;
    state.addr = xiamen ;
  })
</script>

6. 实现本地存储

// 安装插件
npm i pinia-plugin-persist

// 引入插件,并将此插件传递给 pinia :
// src/main.js
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const pinia = createPinia()
pinia.use(piniaPluginPersist)

// 接着在定义 store 时开启 persist 即可
// src/stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 1 }),
    // 开启数据缓存
    persist: {
      enabled: true,
      strategies: [
            {
                key: 'myCounter', // 存储的 key 值,默认为 storeId
                storage: localStorage, // 存储的位置,默认为 sessionStorage
                paths: ['name', 'age'], // 需要存储的 state 状态,默认存储所有的状态
            }
        ]
    }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值