vuex中state.js action.js type.js mutations.js 中几个想不通的问题

Question

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，请问这是最好的方法么？

Answer 1

说一下我个人的理解吧。
关于type.js

简单来讲，type.js只是一个引用，或者说字符串的映射。
type.js把这些string集中在一起使得你可以很直观的看到你的模块或者app具有哪些状态以及状态变化。
这里是官方的解释: https://vuex.vuejs.org/zh/gui...。

// type.js
export const GET_LIST = 'GET_ORDER_LIST'
// action.js
[types.GET_LIST](...) {...} // 实际上等价于直接使用string： GET_ORDER_LIST(...) {...}

至于第二个问题，我只能说是代码的规范问题了，不使用type.js当然可以，只要你能保证action的name能够不冲突就行了。但是个人还是比较建议同时只使用一种，要么都用type，要么都不用。

关于数据持久化，参考目前的一些插件的话，也都是用的localStorage，我自己也是用的localStorage和sessionStorage，如果有更多或者更好的办法的话，麻烦告知我:-)。

Answer 2

1、关于type.js，确实只是一个规范化的管理方式，把所有的mutations的操作，都定义在type.js里面。
2、存储方式，目前项目中使用了vuex-persistedstate 这个插件。默认使用的是localStorage。当然你可以选择SessionSorage以及cookie。这些选择都是基于你了解了他们之间的区别，以及根据项目需求来选择的。没有最好，只有最合适把