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
複製代碼

2. 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。
複製代碼