数据持久化vue

vueX持久化

export default {
    set(key, value) {
        let valueStr = JSON.stringify(value)
        localStorage.setItem(key, valueStr)
    },
    get(key) {
        let valueStr = localStorage.getItem(key)
        if (valueStr) {
            return JSON.parse(valueStr)
        } else {
            return {
                todos: [],
                visibilty: 'all'
            }
        }

    }
}

使用

获取localStorage.get(‘todolist’),

设置 localStorage.set(‘todolist’,state)

vue3 pinia持久化

hooks /localStorageTodo.js

import { ref, watch } from "vue";

export default function (key, value) {
    const data = ref(value)
    if (value) {
        window.localStorage.setItem(key, JSON.stringify(value))
    } else {
        data.value = JSON.parse(window.localStorage.getItem(key))
    }
    watch(data, (newText) => {
        window.localStorage.setItem(key, JSON.stringify(newText))

    })
    return data
}

使用

在仓库 localStorageTodo(‘todo’).value || []
在app.vue里

const store = userTodoStore()
watchEffect(() => {
  store.$subscribe((mutations, state) => {
    localStorageTodo('todo', state.todos)
  })
})