Pinia快速入门

npm install pinia

import { createPinia } from "pinia";
// 创建 pinia 实例
const pinia = createPinia();
createApp(App).use(router).use(pinia).mount("#app");

// 仓库文件
import { defineStore } from "pinia";

// 第二个参数支持两种风格：options api 以及 composition api
export const useCounterStore = defineStore("counter", {
  state: () => {
    return {
      num: 0,
    };
  },
});

// 仓库文件
import { defineStore } from "pinia";

/**
 * 它的第一个参数要求是一个独一无二的名字
 * 第二个参数支持两种风格：options api 以及 composition api(vue3 组合式API)
 */
export const useCounterStore = defineStore("counter", {
  state: () => {
    return {
      num: 0,
    };
  },
  getters: {
    // 针对上面 state 的数据做一个二次计算
    // 可以看作是计算属性
    doubleCount: (state) => state.num * 2,
  },
  actions: {
    // 同步方法
    increment() {
      this.num++;
    },
    decrement() {
      this.num--;
    },
    // 异步方法
    async asyncIncrement() {
      // 等待 1 秒钟
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.increment();
    },
    async asyncDecrement() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.decrement();
    },
  },
});

import { useCounterStore } from "@/store/useCounterStore.js";
const store = useCounterStore(); // 拿到仓库

import { storeToRefs } from "pinia";
// 接下来我们可以从仓库中解构数据出来
const { num, doubleCount } = storeToRefs(store);

// 从仓库将方法解构出来
const { increment, asyncIncrement, asyncDecrement } = store;

import { defineStore } from "pinia";
import { reactive, computed } from "vue";

// 引入其他仓库
import { useCounterStore } from "./useCounterStore.js";

export const useListStore = defineStore("list", () => {
  const counterStore = useCounterStore();
  // 组合 api 风格

  // 创建仓库数据，类似于 state
  const list = reactive({
    items: [
      {
        text: "学习 Pinia",
        isCompleted: true,
      },
      {
        text: "打羽毛球",
        isCompleted: false,
      },
      {
        text: "玩游戏",
        isCompleted: true,
      },
    ],
    counter: 100,
  });

  // 使用 vue 里面的计算属性来做 getters
  const doubleCounter = computed(() => {
    return list.counter * 2;
  });
  // 接下来我们再来创建一个 getter，该 getter 使用的是其他仓库的数据
  const otherCounter = computed(() => {
    return counterStore.doubleCount * 3;
  });

  // 添加新的事项
  function addItem(newItem) {
    list.items.push({
      text: newItem,
      isCompleted: false,
    });
  }

  // 切换事项对应的完成状态
  function completeHandle(index) {
    list.items[index].isCompleted = !list.items[index].isCompleted;
  }

  // 删除待办事项对应下标的某一项
  function deleteItem(index) {
    list.items.splice(index, 1);
  }

  return {
    list,
    doubleCounter,
    otherCounter,
    addItem,
    completeHandle,
    deleteItem,
  };
});

function deepClone(obj) {
  // 如果传入的参数不是对象，则直接返回该参数
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  // 根据传入的参数是数组还是对象来初始化新的变量
  const newObj = Array.isArray(obj) ? [] : {};
  // 递归遍历原始对象并复制属性和值到新对象中
  for (const key in obj) {
    newObj[key] = deepClone(obj[key]);
  }
  // 返回新对象
  return newObj;
}

export function myPiniaPlugin1() {
  // 给所有的仓库添加了一条全局属性
  return {
    secret: "the cake is a lie",
  };
}

export function myPiniaPlugin2(context) {
  //   console.log(context);
  const { store } = context;
  store.test = "this is a test";
}

/**
 * 给特定的仓库来扩展内容
 * @param {*} param0
 */
export function myPiniaPlugin3({ store }) {
  if (store.$id === "counter") {
    // 为当前 id 为 counter 的仓库来扩展属性
    return {
      name: "my name is pinia",
    };
  }
}

/**
 * 重置仓库状态
 */
export function myPiniaPlugin4({ store }) {
  // 我们首先可以将初始状态深拷贝一份
  const state = deepClone(store.$state);
  store.reset = () => {
    // 这里patch时需要进行深拷贝否则对象属性值不会改变
    store.$patch(deepClone(state));
  };
}

// 引入自定义插件
import {
  myPiniaPlugin1,
  myPiniaPlugin2,
  myPiniaPlugin3,
  myPiniaPlugin4,
} from "./plugins";

pinia.use(myPiniaPlugin1);
pinia.use(myPiniaPlugin2);
pinia.use(myPiniaPlugin3);
pinia.use(myPiniaPlugin4);

// 待办事项
function addHandle() {
  if (newItem.value) {
    console.log(list.value.items);
    // 直接操作 store 的状态
    list.value.items.push({
      text : newItem.value,
      isCompleted: false,
    });
    newItem.value = "";
  } else {
    window.alert("请填写新增项目");
  }
}

function addHandle() {
  if (newItem.value) {
    addItem(newItem.value);
    newItem.value = "";
  } else {
    window.alert("请填写新增项目");
  }
}

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

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

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

  return { count, increment }
})

function defineStore(
// TODO: add proper types from above
idOrOptions, setup, setupOptions) {
    let id;
    let options;
    // isSetupStore 会是一个布尔值，如果是 setup 函数，isSetupStore 为 true，否则为 false
    const isSetupStore = typeof setup === 'function';
    if (typeof idOrOptions === 'string') {
        // 如果进入此 if，说明 idOrOptions 是该仓库的 id
        // id 是 defineStore 函数内部的变量，存储仓库 id
        id = idOrOptions;
        // the option store setup will contain the actual options in this case
        // 如果是 setup 风格，就将第三个参数（如果有）赋值给 options，否则就将配置对象赋值给 options
        options = isSetupStore ? setupOptions : setup;
    }
    else {
        // idOrOptions 参数为配置对象
        options = idOrOptions;
        id = idOrOptions.id;
    }
    // 这个函数就是最终返回给外部的函数
    // 外部通过执行这个函数拿到 store 仓库 
    function useStore(pinia, hot) {
        const currentInstance = getCurrentInstance();
        pinia =
            // in test mode, ignore the argument provided as we can always retrieve a
            // pinia instance with getActivePinia()
            (pinia) ||
                (currentInstance && inject(piniaSymbol, null));
        if (pinia)
            setActivePinia(pinia);
        if (!activePinia) {
            throw new Error(`[🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?\n` +
                `\tconst pinia = createPinia()\n` +
                `\tapp.use(pinia)\n` +
                `This will fail in production.`);
        }
        pinia = activePinia;
        if (!pinia._s.has(id)) {
            // creating the store registers it in `pinia._s`
            // 创建一个仓库，并且将这个仓库注册到 pinia._s
            // 根据不同的风格开始创建仓库
            if (isSetupStore) {
                // 如果是 setup 风格，调用的是 createSetupStore
                createSetupStore(id, setup, options, pinia);
            }
            else {
                // 如果是 option 风格，调用的是 createOptionsStore
                // createOptionsStore 方法背后实际上也是在调用 createSetupStore，内部会创建一个名为 setup 的函数
                // 将选项转为 setup 函数内部的项目，然后调用 createSetupStore 方法，将 setup 函数作为第二个参数传递过去
                // 因此理论上来讲，setup 实践上要更加高效一些，因为 option store 背后也是转为 setup，这些是你不阅读源码无法知道的
                createOptionsStore(id, options, pinia);
            }
            /* istanbul ignore else */
            {
                // @ts-expect-error: not the right inferred type
                useStore._pinia = pinia;
            }
        }
        const store = pinia._s.get(id);
        if (hot) {
            const hotId = '__hot:' + id;
            const newStore = isSetupStore
                ? createSetupStore(hotId, setup, options, pinia, true)
                : createOptionsStore(hotId, assign({}, options), pinia, true);
            hot._hotUpdate(newStore);
            // cleanup the state properties and the store from the cache
            delete pinia.state.value[hotId];
            pinia._s.delete(hotId);
        }
        // save stores in instances to access them devtools
        if (IS_CLIENT &&
            currentInstance &&
            currentInstance.proxy &&
            // avoid adding stores that are just built for hot module replacement
            !hot) {
            const vm = currentInstance.proxy;
            const cache = '_pStores' in vm ? vm._pStores : (vm._pStores = {});
            cache[id] = store;
        }
        // StoreGeneric cannot be casted towards Store
        return store;
    }
    useStore.$id = id; // 在 useStore 函数上面还挂了一个 $id，存储了该仓库的 id
    return useStore; // 在向外部返回这个函数
}

function storeToRefs(store) {
    // See https://github.com/vuejs/pinia/issues/852
    // It's easier to just use toRefs() even if it includes more stuff
    // 针对 Vue2 版本的处理
    if (isVue2) {
        // @ts-expect-error: toRefs include methods and others
        return toRefs(store);
    }
    else {
        store = toRaw(store);
        // 创建了一个空对象
        const refs = {};
        // 遍历仓库对象
        for (const key in store) {
            // 拿到仓库对象对应的每一项的值
            const value = store[key];
            if (isRef(value) || isReactive(value)) {
                // @ts-expect-error: the key is state or getter
                // 如果这个值本身是响应式的，将这个值以原本的 key 添加到 refs 对象上面
                refs[key] =
                    // ---
                    toRef(store, key);
            }
        }
        // 整个 for 循环完了之后，所有响应式的值被添加到了 refs 对象上面
        // 向外部返回这个 refs 对象
        return refs;
    }
}