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

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

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

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

关于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。