专栏首页前端之攻略Vuex 中localStorage的使用 原

Vuex 中localStorage的使用 原

1、首先新建一个js文件,如:localstorage.js   通过setItem 和getItem设置和获取数据

const key = "addkey"
var storageObjece = {
  set: function(items) {
    localStorage.setItem(key, JSON.stringify(items))
  },
  get: function() {
    var val = localStorage.getItem(key) || '[]';
      val = JSON.parse(val);
      return val
  }

}

export default storageObjece

setItem设置键值只能是字符串形式,JSON.stringify(items)

getItem获取时再通过JSON.parse()转换成对象

2、设置存储数据

在页面中引用localstorage.js

import storage from "../assets/js/localstorage.js"

同时通过watch监听数据的变化,并在handler方法中存储items  storage.set(items)

<script>
import storage from "../assets/js/localstorage.js"
//console.log(storage)
export default {
  data() {
    return {
      value: "",
      id: 0,
      textvalue: "",
      editId: 0,

    }
  },
  watch:{
    items:{
     handler:function(items){
      //console.log(val,oldVal)
      storage.set(items)
     },
     deep:true  //也检测items内部的key的变化
    }
  },
  methods: {
    addItem() {
      let item = { value: this.value, id: ++this.id }
      this.$store.dispatch("addItems", item)

    },
    del(index) {
      this.$store.dispatch("delItem", index)
    },
    edit(index) {
      //alert(index)
      this.editId = index
      //alert(this.editId)
      //下面的computed是获取store里面的items,items也可以用在方法中,要this.items
      $("#editBox").modal()
      this.textvalue = this.items[index].value
    },
    save() {
      // alert(this.editId)
      // alert(this.beforevalue)

      //this.items[this.editId].value=this.textvalue

      // alert(this.items[this.editId].value)
      this.$store.dispatch("saveItem", {
        editId: this.editId,
        textvalue: this.textvalue
      })
    }
  },

  computed: {
    items: function() {
      return this.$store.state.items
    }
  }
}

</script>

3、获取存储数据

采用Vuex开发模式,获取localStorage数据,同样需要引入localstorage.js,并在store的state中设置

items:storage.get()

import Vue from 'vue'
import Vuex from "vuex"
import storage from "../assets/js/localstorage.js"
Vue.use(Vuex)

//import Index from '@/views/index/index'
//import Manage from '@/views/manage/index'

//import OtherRouter from '../views/index/otherrouter'

const store = new Vuex.Store({
  state: {
    items: storage.get()
    // [
    //   // { value: "default", id: 0 }
    // ],
    
  },

  mutations: {
    addItems(state, item) {
      state.items.push(item)
    },
    delItem(state,index){
      state.items.splice(index,1)
    },
    saveItem(state,payload){
      //alert("hi")
      state.items[payload.editId].value=payload.textvalue
     
    }
  },
  actions: {
    addItems(context, item) {
      context.commit("addItems", item)
    },
    delItem(context,index){
      context.commit("delItem", index)
    },
     saveItem(context,payload){
      context.commit("saveItem", payload)
    },
  }
});

export default store

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用pyppeteer淘宝登录

    现在淘宝的商品搜索页必须要登录才能见,所以必须要cookies才能进行下一步操作。本期介绍如何使用pyppeteer登录淘宝,获取Cookies。

    小歪
  • 一个最简单的WebSocket hello world demo

    https://github.com/i042416/KnowlegeRepository/blob/master/practice/nodejs/server...

    Jerry Wang
  • 聊聊flink的RestClusterClientConfiguration

    本文主要研究一下flink的RestClusterClientConfiguration

    codecraft
  • 2019 年 11 个受欢迎的 JavaScript 动画库!

    超过46K的star,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL。这个库提供了canvas、 svg、CSS3D 和 WebGL渲...

    我就是马云飞
  • webpack带来的安全风险

    最近在资产收集过程中,发现越来越多的vue应用,大部分会使用webpack进行打包,如果没有正确配置,就会导致vue源码泄露。

    ChaMd5安全团队
  • 即刻起,加速您的前端构建

    影响前端发布速度的有两个方面,一个是构建,一个就是压缩,把这两个东西优化起来,可以减少很多发布的时间。

    志航
  • JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

    我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑。Airbnb 编码风格禁止使用 for/in 与 for/of,你知道...

    Fundebug
  • 开发桌面应用,自然用 Electron !

    可能很多读者会感到奇怪,本来是说 Electron,为什么一开始要提到 Node.js 和 JavaScript 呢?它们是什么关系呢?别急,听我慢慢道来。

    CSDN技术头条
  • 一个完整的TDD演练案例(完)

    测试驱动开发完整案例的最后一部分,除完成了整个案例的测试驱动之外,还介绍了依赖注入以及测试驱动开发的定律与原则。

    张逸
  • 文件解析错误 SyntaxError: Unexpected token / in JSON at position 0

    在微信开发者工具上运行,发现报如上图所示的错误,打开相应.json的目录文件,发现代码被注释掉了,即main.json里空的。

    honey缘木鱼

扫码关注云+社区

领取腾讯云代金券