在Vue3项目中使用pinia代替Vuex进行数据存储

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

const useUserStore = defineStore('user', {
  // ...
})

export default {
  computed: {
    // 其他计算属性
    // ...
    // 可以使用 this.counterStore 和 this.userStore获取
    ...mapStores(useCounterStore, useUserStore)
    // 可以使用 this.count 和this.double获取
    ...mapState(useCounterStore, ['count', 'double']),
  },
  methods: {
    // 可以使用 this.increment()调用
    ...mapActions(useCounterStore, ['increment']),
  },
}

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  // other options...
})

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

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

    return {
      // 你可以返回store这个对象，然后就可以在template中使用了
      store,
    }
  },
}

import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()
    // `name` 和 `doubleCount` 是响应式的
    // 插件增加的属性也会创建ref
    // 但是会自动跳过action或者不是响应性的属性
    const { name, doubleCount } = storeToRefs(store)

    return {
      name,
      doubleCount
    }
  },
})

const store = useStore()
store.counter++

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

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

store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

const instance = useMainStore();
// 订阅数据变化，变化时存储 instance.$id 这是storeId
instance.$subscribe((mutation, state) => {
  localStorage.setItem(instance.$id, JSON.stringify(state));
});

//init 初始的时候获取
const val = localStorage.getItem(instance.$id);
if (val) {
  instance.$state = JSON.parse(val);
}

watch(
  pinia.state,
  (state) => {
    // persist the whole state to the local storage whenever it changes
    localStorage.setItem('piniaState', JSON.stringify(state))
  },
  { deep: true }
)

xport const initStore = () => {
  const instance = useMainStore();
  // 订阅数据变化，变化时存储 instance.$id 这是storeId
  instance.$subscribe((mutation, state) => {
    localStorage.setItem(instance.$id, JSON.stringify(state));
  });

  //init 初始的时候获取
  const val = localStorage.getItem(instance.$id);
  if (val) {
    instance.$state = JSON.parse(val);
  }

}

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

    // 组件卸载后，侦听也会有
    someStore.$subscribe(callback, true)

    // ...
  },
}

或者watch状态的变化

watch(
  pinia.state,
  (state) => {
    // 在state改变时，保存在localStorage中
    localStorage.setItem('piniaState', JSON.stringify(state))
  },
  { deep: true }
)

3、使用pinia插件持久化存储

pinia plugin persist官方网站：pinia-plugin-persist

npm i pinia-plugin-persist --save

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
createApp(App).use(store).mount('#app')

import { defineStore } from 'pinia'
// 'main' 是storeId
export const useMainStore = defineStore('main', {
  state: () => ({
    counter: 2,
    name: 'Eduardo',
    isAdmin: true
  }),
  // ……
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

  persist: {
    enabled: true,
    strategies: [ //使用插件自定义存储
      {
        key: 'settings', // key可以自己定义，不填的话默认就是这个store的ID
        storage: localStorage, 
      }
    ]
  },

import type { App } from "vue";
import { createPinia } from "pinia";
import piniaPluginPersist from 'pinia-plugin-persist';//使用插件持久化

const store = createPinia();
store.use(piniaPluginPersist) //使用插件持久化

export function setupStore(app: App<Element>) {
  app.use(store);
}

export { store };

import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'normalize.css' // css初始化

import App from './App.vue'
import { setupStore } from "/@/store";

const app = createApp(App)
setupStore(app)
app.use(ElementPlus)
app.mount('#app')

import { defineStore } from "pinia";
import { store } from "/@/store";

export type settingType = {
    title: string;
    fixedHeader: boolean;
    hiddenSideBar: boolean;
  };

export const useSettingStore = defineStore({
  id: "settings",
  state: (): settingType => ({
    title: "Vue3 + TypeScript + Element",
    fixedHeader: false,
    hiddenSideBar: false
  }),
  persist: {
    enabled: true,
    strategies: [ //使用插件自定义存储
      {
        key: 'settings', // key可以自己定义，不填的话默认就是这个store的ID
        storage: localStorage, 
      }
    ]
  },

  getters: {
    getTitle() {
      return this.title;
    },
    getFixedHeader() {
      return this.fixedHeader;
    },
    getHiddenSideBar() {
      return this.HiddenSideBar;
    }
  },
  actions: {
    CHANGE_SETTING({ key, value }) {
      // eslint-disable-next-line no-prototype-builtins
      if (this.hasOwnProperty(key)) {
        this[key] = value;
      }
    },
    changeSetting(data) {
      this.CHANGE_SETTING(data);
    }
  }
});

export function useSettingStoreHook() {
  return useSettingStore(store);
}

<script lang="ts">
import { defineComponent } from "vue";

import { useSettingStoreHook } from "/@/store/modules/settings";
import { storeToRefs } from "pinia";

export default defineComponent({
  name: "app",
  components: {
  },
  setup() {
    const store = useSettingStoreHook();

    const { fixedHeader, title } = storeToRefs(store);
    return {
      fixedHeader,
      title,
    };
  },
  methods: {
    setTitle() {
      this.title = "Vue3 + TypeScript + Element + Edit";
      console.log(this.title);
    },
  },
});
</script>