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={
    //购物车
    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'  //加入购物车
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={
    //购物车
    [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));
        }) 
    },
    //购物车删除
    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));
        })
    },
   

    //数量加
     add(state,index){
        state.carts[index].value++
    },
    //数量减
    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一个项目，我是下载下来自己研究。在这里有几个问题请教大家一下。
1、在vuex 整个结构中，type.js 扮演的什么角色，在学习vuex的时候没有见到过这种写法，为什么要这么写？必须要这么写么？
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数据就消失了，我查到了localstorage，请问这是最好的方法么？