阅读 178

vuex和localstorage,sessionStorage存储方式,及区别

  1. sessionStorage
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
用法: 
存: //
1. 点(.)运算符                 sessionStorage.lastname = 'key';   
2. 方括号([ ])运算符           sessionStorage['lastname'] = 'key';
3. localStorage.setItem         sessionStorage.setItem("lastname", "key");

取: 
1. 点(.)运算符                 sessionStorage.lastname  => key
2. 方括号([ ])运算符           sessionStorage['lastname']  => key
3. localStorage.getItem         sessionStorage.getItem("lastname")  => key
复制代码
  1. localStorage
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
用法: 
存:
1. 点(.)运算符                 localStorage.lastname = 'key';   
2. 方括号([ ])运算符           localStorage['lastname'] = 'key';
3. localStorage.setItem         localStorage.setItem("lastname", "key");

取:
1. 点(.)运算符                 localStorage.lastname  => key
2. 方括号([ ])运算符           localStorage['lastname']  => key
3. localStorage.getItem         localStorage.getItem("lastname")  => key
复制代码

3.vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,
并以相应的规则保证状态以一种可预测的方式发生变化。
store.js中定义:
export const store = new Vuex.Store({
    state: {
        store_id: "", //店铺ID
        arr:[
            {id:0,name:'店铺1',score:80},
            {id:1,name:'店铺2',score:60},
            {id:2,name:'店铺3',score:70},
        ]
    },
    mutations: {
        //产品详情跳转店铺首页,获取到的商家ID,存入state
        getStoreId(state, id) {
            state.store_id = id;
        },
    },
    getters:{//关于getters查看4.}
})
存:
this.$store.commit("getStoreId", '商家ID'); //商家ID 通过getStoreId方法 存入vuex
取:
this.$store.state.store_id => 商家ID

复制代码

4.关于getters

关于getters
getters 我们可以理解为store仓库的一个计算属性,它的作用主要是用来派生出一些新的状态。
比如我们要把state状态的数据进行一次映射或者筛选,再把这个结果重新计算并提供给组件使用。举个例子:
getters: {
    arrList:function(state){
        return state.arr.map(function(item){
            return item.score >=60 ? '及格':'不及格'
        })
    }
},

此时,getters 会暴露出一个store.getters对象,我们就可以在任何组件中使用this.$store.getters.xxx来绑定数据。
<template>
    <div>
        <ul>
            <li v-for="(item,index) in arrList" :key="index">{{item}}</li>
        </ul>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    export default {
        computed:{
            arrList:function(){
                return this.$store.getters.arrList;//通过this.$store.getters对象来访问
            }
        }
    }
</script>

但是上面写法还是不够简便,假如我 getters 状态多的时候,就得重复这样的写法,很麻烦,也不够美观,
vuex给我们提供了另外一个方法mapGetters顾名思义就是映射多个getters。下面我们再改一下上面的代码(使用es6语法)。
getters: {
    arrList:state => return state.arr.map( item => item.score >=60 ? '及格':'不及格' )
},
<script>
    import {mapGetters} from 'vuex'
    export default {
        computed:{
            ...mapGetters(['arrList'])
        }
    }
</script>

最后如果我们想给getters属性起个别名,我们可以通过对象的形式: 
<script>
    import {mapGetters} from 'vuex'
    export default {
        computed:{
            ...mapGetters({
                newList:'arrList'
            })
        }
    }
</script>
复制代码

区别:

1.区别:
vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ),临时保存。
localStorage和sessionStorage只能存储字符串类型,
对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

2.应用场景:
vuex用于组件之间的传值,当应用遇到多个组件共享状态时候,即:多个视图依赖于同一个状态,不同视图的行为需要变更同一状态。
localstorage,sessionstorage则主要用于不同页面之间的传值。

3.永久性:
当刷新页面(这里的刷新页面指的是F5刷新,属于清除内存了)时vuex存储的值会丢失,
sessionstorage页面关闭后就清除掉了,localstorage不会。  

注:很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,
如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage,sessionstorage无法做到,原因就是区别1复制代码
关注下面的标签,发现更多相似文章
评论