Pinia 使用及与 Vuex 区别

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

与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持

Pinia 和 Vuex 的区别

  • 在Pinia中mutations不再存在
  • 在Pinia中没有modules模块概念,没有命名空间模块
  • Pinia采用扁平化架构,可以说所有Store都是命名空间
  • Pinia中state可直接修改或通过action,Vuex中只能通过mutations
  • Pinia和Vuex中action相同,都可以执行异步逻辑,不同的是,Pinia在action中可修改state,Vuex必须使用mutations修改

Pinia使用

在main.js中引用

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

pinia创建

  <!-- store/user.js -->
  
  import { defineStore } from "pinia";

  const useUser = defineStore("user", {
    state: () => ({ counter: 0 }),
    actions: {
      increment() {
        this.counter++;
      },
    },
    getters: {
      doubleCount: (state) => state.counter * 2,
    }
  })

在 <script setup> 中使用 Pinia


  // 导入  
  import { useTestStore } from '@/store/modules/test'

  // 创建 store 实例
  const testStore = useTestStore()

  // 获取 state 中的值
  testStore.counter

  // 调用 actions 中的方法
  testStore.increment()

  // 获取 getters 中的值
  testStore.doubleCount

注意:在 setup() 中调用 useTestStore() 之前不会创建对应的 store

Store说明

Store 是使用 defineStore() 定义的,并且它需要一个唯一名称,作为第一个参数传递:

  import { defineStore } from 'pinia'

  // useStore 可以是 useUser、useCart 之类的任何东西
  // 第一个参数是应用程序中 store 的唯一 id
  export const useStore = defineStore('main', {
    // other options...
  })

这个 name,也称为 id,是必要的,Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use… 是跨可组合项的约定,以使其符合你的使用习惯。

使用 store

我们正在 定义 一个 store,因为在 setup() 中调用 useStore() 之前不会创建 store

  import { useStore } from '@/stores/counter'

  export default {
    setup() {
      const store = useStore()

      return {
        // 您可以返回整个 store 实例以在模板中使用它
        store,
      }
    },
  }

一旦 store 被实例化,你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性。 我们将在接下来的页面中详细介绍这些内容,但自动补全会对您有所帮助。

请注意,store 是一个用reactive 包裹的对象,这意味着不需要在getter 之后写.value,但是,就像setup 中的props 一样,我们不能对其进行解构

  export default defineComponent({
    setup() {
      const store = useStore()
      // 这不起作用,因为它会破坏响应式
      // 这和从 props 解构是一样的
      const { name, doubleCount } = store

      name // "eduardo"
      doubleCount // 2

      return {
        // 一直会是 "eduardo"
        name,
        // 一直会是 2
        doubleCount,
        // 这将是响应式的
        doubleValue: computed(() => store.doubleCount),
        }
    },
  })

为了从 Store 中提取属性同时保持其响应式,您需要使用storeToRefs()。 它将为任何响应式属性创建 refs。 当您仅使用 store 中的状态但不调用任何操作时,这很有用:

  import { storeToRefs } from 'pinia'

  export default defineComponent({
    setup() {
      const store = useStore()
      // `name` 和 `doubleCount` 是响应式引用
      // 这也会为插件添加的属性创建引用
      // 但跳过任何 action 或 非响应式(不是 ref/reactive)的属性
      const { name, doubleCount } = storeToRefs(store)

      return {
        name,
        doubleCount
      }
    },
  })

state 说明

修改 state 几种方式

  • 直接修改 如:testStore.counter = 20
  • 通过调用 action 方法修改
  • 使用 testStore.$patch 修改

$patch 具体使用

$patch 传递对象

调用 $patch 方法,它允许您使用部分 state 对象同时应用多个更改,如:

  testStore.$patch({
    counter: store.counter + 1,
    name: 'Abalam',
  })

但是上面这种语法在处理 集合修改 时都需要重新创建一个新集合,因此 $patch 方法也接受一个函数来批量修改集合内部分对象的情况

$patch 传递函数
  testStore.$patch((state) => {
    state.items.push({ name: 'shoes', quantity: 1 })
    state.hasChanged = true
  })

重置状态

通过调用 store 上的 $reset() 方法将状态 重置 到其初始值:

  const store = useStore()
  store.$reset()

替换state

您可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态:

  store.$state = { counter: 666, name: 'Paimon' }

您还可以通过更改 pinia 实例的 state 来替换应用程序的整个状态。 这在 SSR for hydration 期间使用。

  <!-- pinia 实例在 main.js 文件内 -->
  pinia.state.value = {}

订阅状态

可以通过 store 的 $subscribe() 方法查看状态及其变化,类似于 Vuex 的 subscribe 方法。与常规的 watch() 相比,使用 $subscribe() 的优点是 subscriptions 只会在 patches 之后触发一次(例如,使用 $patch 的函数版本时),其实 通过 watch 监听时,也是只触发一次,但在应用加载时会先执行一次,而且需要监听 pinia 实例上所有 state (pinia实例在 main.ts 内)

  cartStore.$subscribe((mutation, state) => {
    // import { MutationType } from 'pinia'
    // type:用于记录数据通过什么方式变化的
    // “direct” :通过 action 改变的
    // “patch object“ :通过 $patch 传递对象的方式改变的
    // “patch function” :通过 $patch 传递函数的方式改变的
    mutation.type // 'direct' | 'patch object' | 'patch function'
    // 与 cartStore.$id 相同
    mutation.storeId // 'cart'
    // 仅适用于 mutation.type === 'patch object'
    mutation.payload // 补丁对象传递给 to cartStore.$patch()

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

注意: 通过 $subscribe 无法准确的知道修改的是哪个state数据

默认情况下,state subscriptions 绑定到添加它们的组件(如果 store 位于组件的 setup() 中)。 意思是,当组件被卸载时,它们将被自动删除。 如果要在卸载组件后保留它们,请将 { detached: true } 作为第二个参数传递给 detach 当前组件的 state subscription:

  export default {
    setup() {
      const someStore = useSomeStore()

      // 此订阅将在组件卸载后保留
      someStore.$subscribe(callback, { detached: true })
      // ...
    },
  }

watch 监听 state 数据变化

pinia 实例在 main.js 文件内,监听的是所有的 state

  <!-- pinia 实例在 main.js 文件内 -->
  watch(
    pinia.state,
    (state) => {
      // 每当它发生变化时,将整个状态持久化到本地存储
      localStorage.setItem('piniaState', JSON.stringify(state))
    },
    { deep: true }
  )

Actions说明

Actions 相当于组件中的 methods。可以通过 this 访问到整个 Store 实例,并提供完整类型(自动完成)支持。并且 actions 可以是异步的

  • Actions 像 methods 一样被调用
  • 可执行 同步、异步 方法
  • 可以返回 Promise 对象

访问其他 store 操作

  import { useAuthStore } from './auth-store'

  export const useSettingsStore = defineStore('settings', {
    state: () => ({
      // ...
    }),
    actions: {
      async fetchUserPreferences(preferences) {
        const auth = useAuthStore()
        // ...
      },
    },
  })

订阅 Actions

可以使用 store.$onAction() 订阅 action 及其结果。传递给它的回调在 action 之前执行。after 处理 Promise 并允许您在 action 完成后执行函数。以类似的方式,onError 允许您在处理中抛出错误。这些对于在运行时跟踪错误很有用,这是一个在运行 action 之前和它们 resolve/reject 之后记录的示例

注意

  • $onAction 只有在调用 action 内函数时才会执行
  • $subscribe 在 state 中数据变化时执行
  const unsubscribe = someStore.$onAction(
    ({
      name, // action 的名字
      store, // store 实例
      args, // 调用这个 action 的参数
      after, // 在这个 action 执行完毕之后,执行这个函数
      onError, // 在这个 action 抛出异常的时候,执行这个函数
    }) => {
      // 记录开始的时间变量
      const startTime = Date.now()
      // 这将在 `store` 上的操作执行之前触发
      console.log(`Start "${name}" with params [${args.join(', ')}].`)  

      // 如果 action 成功并且完全运行后,after 将触发。
      // 它将等待任何返回的 promise
      after((result) => {
        console.log(
          `Finished "${name}" after ${
            Date.now() - startTime
          }ms.\nResult: ${result}.`
        )
      })  

      // 如果 action 抛出或返回 Promise.reject ,onError 将触发
      onError((error) => {
        console.warn(
          `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
        )
      })
    }
  )

  // 手动移除订阅
  unsubscribe()

默认情况下,action subscriptions 绑定到添加它们的组件(如果 store 位于组件的 setup() 内)。 意思是,当组件被卸载时,它们将被自动删除。 如果要在卸载组件后保留它们,请将 true 作为第二个参数传递给当前组件的 detach action subscription:

  export default {
    setup() {
      const someStore = useSomeStore()

      // 此订阅将在组件卸载后保留
      someStore.$onAction(callback, true)

      // ...
    },
  }

Getters 说明

Getter 完全等同于 Store 状态的计算值,具有缓存功能。可以通过 this 访问到整个 Store 的实例

将参数传递给 getter

Getters 只是幕后的 computed 属性,因此无法向它们传递任何参数。但是,您可以从 getter 返回一个函数以接受任何参数:

  export const useTestStore = defineStore("testStore", {
    state: () => ({
      list: [
        { id: 10, active: true },
        { id: 20, active: false },
      ],
    }),
    getters: {
      getUserById: (state) => (userId) => state.list.find((item) => item.id === userId)
    },
  })

并在组件中使用:

  <script setup>
  import { useTestStore } from '@/store/modules/test'

  // 创建 store 实例
  const testStore = useTestStore()

  // 根据 Id 获取指定用户
  testStore.getUserById(10)
  </script>

请注意,在执行上述操作时,getter 不再换成,它们只是您调用的函数。但是可以在 getter 本身内部汉城一些结果,这并不常见,但应该证明性能更高:

  export const useTestStore = defineStore("testStore", {
    getters: {
      // 根据用户Id从活跃的用户中获取指定用户
      getActiveUserById(state) {
        // 先缓存 活跃的 用户
        const activeUsers = state.list.filter((user) => user.active);
        return (userId) => activeUsers.find((user) => user.id === userId);
      },
    },
  })

访问其他 Store 的 getter

要使用其他存储 getter, 您可以直接在 getter 内部使用它:

  import { useOtherStore } from './other-store'

  export const useStore = defineStore('main', {
    state: () => ({
      // ...
    }),
    getters: {
      otherGetter(state) {
      	// 获取其他 stroe 实例
        const otherStore = useOtherStore()
        return state.localData + otherStore.data
      },
    },
  })

Pinia 插件

使用 pinia.use() 将插件添加到 pinia 实例中。 最简单的例子是通过返回一个对象为所有Store添加一个静态属性:

  import { createPinia } from 'pinia'
  // 为安装此插件后创建的每个store添加一个名为 `secret` 的属性
  // 这可能在不同的文件中
  function SecretPiniaPlugin() {
    return { secret: 'the cake is a lie' }
  }

  const pinia = createPinia()
  // 将插件提供给 pinia
  pinia.use(SecretPiniaPlugin)
  // 在另一个文件中
  const store = useStore()
  // 只能通过store.secret方式获取,使用storeToRefs则无效,但使用toRefs(store) 则可以
  store.secret // 'the cake is a lie'

这对于添加全局对象(如路由器、模式或 toast 管理器)很有用

在插件中调用 $subscribe

您也可以在插件中使用 store.$subscribe 和 store.$onAction

  pinia.use(({ store }) => {
    store.$subscribe(() => {
      // 在存储变化的时候执行
    })
    store.$onAction(() => {
      // 在 action 的时候执行
    })
  })

注意:pinia-plugin-persistedstate 库就是利用 $subscribe 选项

Pinia 持久化存储插件 pinia-plugin-persistedstate 使用

1: 安装插件

  yarn add pinia-plugin-persistedstate

2: 添加插件到Pinia中

  import { createPinia } from 'pinia'
  import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

3: 将持久选项 persist 添加到要持久化的Store上

  import { defineStore } from 'pinia'

  export const useStore = defineStore('store', {
    state: () => {
      return {
        someState: 'hello pinia',
      }
    },
    persist: true,
  })

说明:只需要在 defineStore 中添加 persist: true,就开启了把 state 数据存储到本地的功能

注意:默认情况下

  • 存储整个 state 数据
  • 使用 localStorage 存储到本地
  • 存储的 key 为 store.$id 的名字

persist配置

您可以通过指定persist属性的选项来配置存储的持久化方式

  import { defineStore } from 'pinia'

  export const useStore = defineStore('store', {
    state: () => {
      return {
        save: {
          me: 'saved',
          notMe: 'not-saved',
        },
        someState: 'hello pinia',
      }
    },
    persist: {
      key: 'my-custom-key', // 默认 store.$id 作为名字,如上面就是 store
      storage: sessionStorage, // 使用 session 存储
      paths: ['save.me', 'someState'], // 存储 state 中的save.me 和 someState 属性
    },
  })

paths说明

  • [] 表示没有持久化状态即什么都不存储,未定义或null表示整个状态都被持久化
  • paths 中的值代表需要存储的数据,未写的属性不会存储
  • [‘save.me’] 代表只存储 state 中 save对象 内的 me 属性

注意:另外 persist 对象中还有 serializer、beforeRestore、afterRestore 配置属性,但不会经常用到

引用

https://pinia.web3doc.top/getting-started.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值