Data persistence

Data persistence refers to storing data locally, such as localStorage or sessionStorage. Of course, we are not going to introduce how to use the native method, and store plug-ins to automatically store data locally. There are many libraries of this type in the Vue ecosystem. Here I would like to introduce Vuex-PersistedState, which supports both VUe2, VUe3 and NuxTJS.

chapters

  1. Install dependencies
  2. The calling component

Install dependencies

npm install --save vuex-persistedstate
Copy the code

The calling component

Edit the store file SRC /store/index.js

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

import user from './modules/user'

const store = createStore({
    modules: {
        user
    },
    plugins: [createPersistedState()],
})

export default store;
Copy the code

The plugin will automatically save all store data to localStorage, which can be viewed in a browser.

F12 | Application

Note that the plug-in saves all data locally by default, and uses localStorage by default. If you only need to save a module or use a non-localstorage, you can check the official documentation.

View the code:

Git clone (downloaded direct checkout https://github.com/chitucode/ctcode-vue3.git git checkout v9.0Copy the code

Wechat account of friends

Add big brother wechat and thousands of peers to enhance technical communication life

hsian_

The last

The code word is not easy and your clicks and likes and comments are my best motivation