vuex中state.js action.js type.js mutations.js 中幾個(gè)想不通的問(wèn)題

state.js:
const state={
    article:localStorage["article"]?JSON.parse(localStorage["article"]): [],
    collections:localStorage["collections"]?JSON.parse(localStorage["collections"]): [],
    carts:localStorage["carts"]?JSON.parse(localStorage["carts"]): [],
    orders:localStorage["orders"]?JSON.parse(localStorage["orders"]): [],
    todos:localStorage["todos"]?JSON.parse(localStorage["todos"]): [],
    address:localStorage["address"]?JSON.parse(localStorage["address"]): [],
    nowIndex:0,
    arr:[1,2,3,4,5]
}

export default state

action.js:
const actions={
    //購(gòu)物車
    setCart({commit},data){
        commit('SET_CARTS',data)
    },
    
    //文章收藏
    setArticle({commit},data){
        commit('SET_ARTICLE',data)
    },
    //商品收藏
    setGoods({commit},data){
        commit('SET_GOODS',data)
    },
    //地址
    setAddress({commit},data){
        commit('SET_ADDRESS',data)
    },
    //訂單
    setOrders({commit},data){
        commit('SET_ORDERS',data)
    }
}

export default actions

type.js:
export const SET_CARTS = 'SET_CARTS'  //加入購(gòu)物車
export const SET_ARTICLE ='SET_ARTICLE' //文章收藏
export const SET_GOODS='SET_GOODS' //商品收藏
export const SET_ORDERS='SET_ORDERS' //訂單
export const SET_ADDRESS='SET_ADDRESS' //地址

import state from './state'
import * as type from './type.js'
import { MessageBox } from 'mint-ui';

const matutaions={
    //購(gòu)物車
    [type.SET_CARTS](state,data){
        state.carts.push(data)
        localStorage.setItem("carts",JSON.stringify(state.carts));
    },
    //文章
    [type.SET_ARTICLE](state,data){
        state.article.push(data)
        localStorage.setItem("article",JSON.stringify(state.article));
    },
    //商品
    [type.SET_GOODS](state,data){
        state.collections.push(data)
        localStorage.setItem("collections",JSON.stringify(state.collections));
    },
    //訂單
    [type.SET_ORDERS](state,data){
        state.orders.push(data)
        localStorage.setItem("orders",JSON.stringify(state.orders));
    },
    //地址
    [type.SET_ADDRESS](state,data){
        state.address.push(data)
        localStorage.setItem("address",JSON.stringify(state.address));
    },
    //文章刪除
    del:(state,index)=>{
        MessageBox.confirm('確定取消收藏該文章么？').then(action=>{
            state.article.splice(index,1)
            localStorage.setItem("article",JSON.stringify(state.article));
        })
    },
    //商品刪除
    cancel:(state,index)=>{
        MessageBox.confirm('確定取消收藏該商品么？').then(action=>{
            state.collections.splice(index,1)
            localStorage.setItem("collections",JSON.stringify(state.collections));
        })
    },
    laji:(state,index)=>{
        MessageBox.confirm('確定刪除收貨地址么？').then(action=>{
            state.address.splice(index,1)
            localStorage.setItem("address",JSON.stringify(state.address));
        }) 
    },
    //購(gòu)物車刪除
    shanchu:(state,index)=>{
        MessageBox.confirm('確定刪除該商品么？').then(action=>{
            state.carts.splice(index,1)
            localStorage.setItem("carts",JSON.stringify(state.carts));
        })
    },
    //訂單刪除
    odefault:(state,index)=>{
        MessageBox.confirm('確定刪除該訂單么？').then(action=>{
            state.orders.splice(index,1)
            localStorage.setItem("orders",JSON.stringify(state.orders));
        })
    },
   

    //數(shù)量加
     add(state,index){
        state.carts[index].value++
    },
    //數(shù)量減
    reduce(state,index){
        state.carts[index].value==1?state.carts[index].value=1: state.carts[index].value--
    },

    settlement:(state,data)=>{
        state.carts=[];
        localStorage.setItem("carts",JSON.stringify(state.carts));
    },
}

export default matutaions

上述代碼源于github一個(gè)項(xiàng)目，我是下載下來(lái)自己研究。在這里有幾個(gè)問(wèn)題請(qǐng)教大家一下。
1、在vuex 整個(gè)結(jié)構(gòu)中，type.js 扮演的什么角色，在學(xué)習(xí)vuex的時(shí)候沒(méi)有見(jiàn)到過(guò)這種寫法，為什么要這么寫？必須要這么寫么？
2、vuex中action.js 有一些方法，但是不是全部，就是為什么//地址

[type.SET_ADDRESS](state,data){
    state.address.push(data)
    localStorage.setItem("address",JSON.stringify(state.address));
},
//文章刪除
del:(state,index)=>{
    MessageBox.confirm('確定取消收藏該文章么？').then(action=>{
        state.article.splice(index,1)
        localStorage.setItem("article",JSON.stringify(state.article));
    })
},

同樣是vuex里面的方法，有的方法是用上面的 [type.SET_ADDRESS]寫法，有的直接就可以像del這么使用，為什么要寫兩種呢？
3、vuex 一刷新瀏覽器然后vuex里面的state數(shù)據(jù)就消失了，我查到了localstorage，請(qǐng)問(wèn)這是最好的方法么？