localstorage vuex和pinia的异同

简述一下localstorage vuex和pinia的异同

localstorage、vuex和pinia都是用于管理数据的工具，但它们有着不同的使用场景和功能。

• localstorage是浏览器提供的本地存储机制，用于在浏览器本地存储少量的键值对数据。它可以在浏览器关闭后仍然保存数据，但是存储的数据量较小，不适合存储大量数据和复杂的数据结构。
• vuex是Vue.js官方提供的状态管理工具，用于管理应用中的共享状态。它可以帮助开发者更好地组织和管理应用中的状态数据，提高代码的可维护性。vuex支持响应式更新状态数据，可以通过各种方式对状态进行读写操作。
• pinia是一个基于Vue.js 3的状态管理库，它可以让你在应用中使用类似于Vuex的全局状态管理模式。与Vuex不同的是，Pinia是基于Vue3的新API reactive 和 computed 构建的，使用起来更加简单和灵活。它还提供了插件和工具来方便地管理状态数据，如DevTools插件和状态快照功能。

它们的共同点是都可以用于存储和管理数据，但在应用中的作用和使用场景上有所不同。如果你需要管理大量的共享状态，使用vuex或pinia会更加方便和高效。如果你只需要在浏览器本地存储一些少量的数据，使用localstorage可以满足你的需求。

存储、使用、删除同个数据（userID:12345）的代码应用方式，

以下是 localStorage、Vuex 和 Pinia 存储、使用和删除同个数据（如：userID:12345）的代码应用方式：

使用 localStorage 存储 userID：

localStorage.setItem("userID", "12345");

使用 localStorage 获取 userID：

const userID = localStorage.getItem("userID");

使用 localStorage 删除 userID：

localStorage.removeItem("userID");

使用 Vuex 存储 userID：

// store.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userID: ""
  },
  mutations: {
    setUserID(state, id) {
      state.userID = id;
    },
    clearUserID(state) {
      state.userID = "";
    }
  },
  actions: {
    setUserID({ commit }, id) {
      commit("setUserID", id);
    },
    clearUserID({ commit }) {
      commit("clearUserID");
    }
  },
  getters: {
    getUserID: state => state.userID
  }
});

在需要存储 userID 的组件中使用 Vuex：

import { mapActions } from "vuex";

export default {
  methods: {
    ...mapActions(["setUserID"]),
    loginSuccess(userID) {
      this.setUserID(userID);
    }
  }
};

在需要获取 userID 的组件中使用 Vuex：

import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["getUserID"]),
    userID() {
      return this.getUserID;
    }
  }
};

在需要删除 userID 的组件中使用 Vuex：

import { mapActions } from "vuex";

export default {
  methods: {
    ...mapActions(["clearUserID"]),
    logout() {
      this.clearUserID();
    }
  }
};

使用 Pinia 存储 userID：

// store.js
import { createPinia } from "pinia";

const pinia = createPinia();

export const useStore = pinia.createStore({
  state: () => ({
    userID: ""
  }),
  actions: {
    setUserID(id) {
      this.userID = id;
    },
    clearUserID() {
      this.userID = "";
    }
  },
  getters: {
    getUserID: state => state.userID
  }
});

在需要存储 userID 的组件中使用 Pinia：

import { useStore } from "./store.js";

export default {
  methods: {
    loginSuccess(userID) {
      const store = useStore();
      store.setUserID(userID);
    }
  }
};

在需要获取 userID 的组件中使用 Pinia：

import { useStore } from "./store.js";

export default {
  setup() {
    const store = useStore();
    const userID = computed(() => store.getUserID);

    return {
      userID
    };
  }
};

在需要删除 userID 的组件中使用 Pinia：

import { useStore } from "./store.js";

export default {
  methods: {
    logout() {
      const store = useStore();
      store.clearUserID();
    }
  }
};