一杯茶的时间入门Vue新的状态管理库Pinia

点击在线阅读，体验更好	链接
现代JavaScript高级小册	链接
深入浅出Dart	链接
现代TypeScript高级小册	链接
linwu的算法笔记📒	链接

Pinia 是 Vue.js 官方推荐的新一代状态管理库,它提供了非常简洁和直观的 API,可以极大地提高我们管理应用状态的效率。本文将深入介绍 Pinia 的各种高级用法,内容涵盖:

Pinia 的优势

相比 Vuex,Pinia 有以下优点:

• 更贴合 Vue 3 的 Composition API 风格,学习成本更低
• 不需要区分 Mutation 和 Action,统一使用 Actions 操作状态
• 支持 TypeScript,可以充分利用 TS 的静态类型系统
• 模块化管理 States,每个模块是一个 Store
• 直观的 Devtools,可以看到每个 State 的变化

创建 Pinia

在 main.js 中导入 createPinia 并使用:

import { createApp } from 'vue'
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)

可以通过 app.config.globalProperties.$pinia 访问 Pinia 实例。

Option Store​

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

使用 defineStore API 定义 Store:

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {

  // state
  state: () => {
    return {
      counter: 0
    }
  },

  // getters
  getters: {
    doubleCount(state) {
      return state.counter * 2
    }
  },

  // actions
  actions: {
    increment() {
      this.counter++ 
    }
  }
})

• 接收唯一 ID 作为第一个参数
• state、getters、actions 定义方式与 Vue 组件类似
• 可以直接通过 this 访问状态

Pinia 提供多种选项配置 Store:

state

定义响应式状态:

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

必须是一个返回状态对象的函数。

getters

定义 getter 计算属性:

getters: {
  double(state) {
    return state.count * 2
  }
}

getter 可以接收参数:

getters: {
  getMessage(state) {
    return (name = 'Vue') => `Hello ${name}` 
  }
}

actions

定义方法修改状态:

actions: {
  increment(amount = 1) {
    this.count += amount
  }
}

actions 支持同步和异步操作。

persist

配置数据持久化,需要使用插件:

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_store',
      storage: localStorage,
    },
  ]
} 

使用 Store

通过 useXxxStore() 获取 Store 实例:

import { useMainStore } from '@/stores/main'

export default {
  setup() {
    const main = useMainStore()

    main.increment()
  } 
}

读取状态、调用 actions 同 Vue 组件。

读取状态

// 直接读取
const count = main.count

// 通过计算属性
const double = computed(() => main.doubleCount)

// 通过 storeToRefs
const { count } = storeToRefs(main)

调用 Actions

main.increment()

const message = main.getMessage('Vue')

多个 Store

可以拆分多个 Store 管理不同模块状态:

stores
|- user.js
|- product.js

单独导出每个 Store 并在组件中使用:

import { useUserStore } from '@/stores/user'
import { useProductStore } from '@/stores/product' 

export default {
  setup() {
    // ...
  }
}

Store 可以互相引用:

// userStore.js
import { useProductStore } from './product'

export const useUserStore = defineStore({
  // 可以直接使用 productStore
})

Setup Store​

个人比较倾向这种语法

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

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 变得更加复杂。

数据持久化

Pinia 默认状态不持久化,可以通过插件实现持久化:

npm install pinia-plugin-persistedstate

import persistedState from 'pinia-plugin-persistedstate'

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

在 Store 中配置 persist:

export const useUserStore = defineStore({
  persist: {
    enabled: true
  } 
}) 

配置 storage 指定存储位置:

persist: {
  storage: sessionStorage
}

Pinia 插件

Pinia 生态已有许多插件,可以扩展更多功能:

• pinia-plugin-persistedstate:数据持久化
• pinia-plugin-debounce:防抖修改状态
• pinia-plugin-pinia-observable:转换成 Observable

使用插件:

import piniaPluginPersist from 'pinia-plugin-persist'

pinia.use(piniaPluginPersist)

Devtools

Pinia支持Vue devtools

购物车示例

我们来通过一个购物车的例子看看 Pinia 的用法:

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

export const useCartStore = defineStore('cart', {

  state: () => {
    return {
      items: []  
    }
  },

  getters: {
    total(state) {
      return state.items.reduce((total, item) => {
         return total + item.price  
      }, 0)
    }
  },

  actions: {
    addItem(item) {
      this.items.push(item)
    },

    removeItem(id) {
      this.items = this.items.filter(i => i.id !== id)
    }
  }
})

在组件中使用:

// Cart.vue

import { useCartStore } from '@/stores/cart'

setup() {
  const cart = useCartStore()

  return {
    items: cart.items,
    total: cart.total
  }
}

可以看出代码非常简洁直观。

Pinia 插件

Pinia 插件是一个函数，可以选择性地返回要添加到 store 的属性。它接收一个可选参数，即 context。

export function myPiniaPlugin(context) {
  context.pinia // 用 `createPinia()` 创建的 pinia。 
  context.app // 用 `createApp()` 创建的当前应用(仅 Vue 3)。
  context.store // 该插件想扩展的 store
  context.options // 定义传给 `defineStore()` 的 store 的可选对象。
  // ...
}

然后用 pinia.use() 将这个函数传给 pinia：

pinia.use(myPiniaPlugin)

插件只会应用于在 pinia 传递给应用后创建的 store，否则它们不会生效。

实现一个持久化插件

• getStorage 函数：根据提供的 key 从本地存储中读取数据。如果数据无法解析或不存在，则返回 null。
• setStorage 函数：将提供的值转换为 JSON 格式，并以指定的 key 保存到本地存储中。
• DEFAULT_KEY 常量：表示默认的本地存储键名前缀。如果在选项中未提供自定义键名，将使用该默认键名。
• Options 类型：定义了插件选项对象的类型，包含 key（本地存储键名前缀）和 needKeepIds（需要进行持久化的 Pinia 存储的 ID 数组）两个可选属性。
• piniaPlugin` 函数：这是主要的插件函数，它接收一个选项对象，并返回一个用于处理 Pinia 存储的函数。

import { PiniaPluginContext } from "pinia";
import { toRaw } from "vue";


// Get data from local storage by key
export function getStorage(key) {
  const data = localStorage.getItem(key);
  try {
    return JSON.parse(data);
  } catch (error) {
    return null;
  }
}

// Set data to local storage with a key
export function setStorage(key, value) {
  const data = JSON.stringify(value);
  localStorage.setItem(key, data);
}


const DEFAULT_KEY = "pinia";

type Options = {
  key?: string;
  needKeepIds?: string[];
};

const piniaPlugin = ({ key = DEFAULT_KEY, needKeepIds = [] }: Options) => {
  return (context: PiniaPluginContext) => {
    const { store } = context;
    const data = getStorage(`${key}-${store.$id}`);

    const subscribeToStore = () => {
      if (needKeepIds.length === 0 || needKeepIds.includes(store.$id)) {
        setStorage(`${key}-${store.$id}`, toRaw(store.$state));
      }
    };

    store.$subscribe(subscribeToStore);

    return {
      ...data,
    };
  };
};

export default piniaPlugin;

图解算法小册

最近整理了一本算法小册，感兴趣的同学可以加我微信linwu-hi进行获取