Pinia 入门 for vuex 开发者

官方给出的理由是：API 更简单、更简洁，对 TypeScript 更友好

• 没 mutations
• 没 名称空间，但有模块概念
• TypeScript 类型支持无需额外 warps 支持
• 存储默认为动态的
• 不再嵌套模块结构

Vue < 2.7 需要单独设置

// 基本用法
import { createPinia, defineStore } from 'pinia';
// 初始化
app.use(createPinia());

// 定义一相模块
export const useSomeModuleStore = defineStore('someModule', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

// or
defineStore('someModule', () => {
  const count = ref(0);
  const double = computed(() => store.doubleCount);
  function increment() {
    count.value++;
  }

  return { count, double, increment };
});

// use
const store = useSomeModuleStore();
console.log('store.count', store.count++);
// 重置
store.$reset();
// 同时修改多个属性
store.$patch({ count: store.count + 1 });
// 复杂属性
store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 });
});
// ❌ 解构会破坏它的响应式
const { count } = store;
// ✅ 但这样可以
const { count } = storeToRefs(store);

// 订阅
store.$subscribe((mutation, state) => {
  // 每当状态发生变化时，将整个 state 持久化到本地存储。
  localStorage.setItem('xxx', JSON.stringify(state));
});

访问其它模块的 state、getter 或 action 同在组件中访问它们一样

Plugins

function SecretPiniaPlugin() {
  // 添加全局状态 secret
  return { secret: 'the cake is a lie' };
}

const pinia = createPinia();
// 将该插件交给 Pinia
pinia.use(SecretPiniaPlugin);
app.use(pinia);

// 在另一个文件中
someStore.secret; // 'the cake is a lie'

// d.ts
pinia.use(plugin: PiniaPlugin): Pinia;
PiniaPlugin = (context: PiniaPluginContext) => object | void
PiniaPluginContext = {
  pinia: Pinia;
  app: App;
  // 该插件想扩展的 store
  store: Store<Id, S, G, A>;
  // 定义传给 `defineStore()` 的 store 的可选对象。
  options: DefineStoreOptionsInPlugin<Id, S, G, A>;
}

添加外部属性、第三方库的类实例或非响应式的简单值时，

import { markRaw } from 'vue';
// 根据你的路由器的位置来调整
import { router } from './router';

pinia.use(({ store }) => {
  store.router = markRaw(router);
});