Vue 如何利用 vuex 永久储存数据

首先需要在 vue项目上  安装 vuex 与 vuex-persistedstate


npm i vuex


npm install --save vuex-persistedstate

1. 在 src 目录下 创建 "store" 文件夹

2. 在store 文件夹下 创建 自定义 " index.js" 文件

3.在 index.js 中 import  引入 vue , vuex , persistedstate  并且使用use 方法是用 Vuex

4. 在store对象内  plugins: [createPersistedState()],  使用 persistedstate 组件

5.把store文件夹 引入  main.js 中

最后  可以用 以下方法 访问到数据 ， console.log(this.$store)  看下就明白了

this.$store.state

this.$store.commit('函数名','需要传的参数')

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

const store = new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    isLoading: false,
    num: ['1']
  },
  mutations: {
    loading (state, str) {
      let list = []
      list.push(str)
      state.num = [...state.num, ...list]
      console.log('ok')
    }
  }
})
export default store

最后

以上就是尊敬石头为你收集整理的Vue 如何利用 vuex 永久储存数据的全部内容，希望文章能够帮你解决Vue 如何利用 vuex 永久储存数据所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。