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].valuePP
    },
    //
    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

the above code comes from a github project, which I downloaded and studied by myself. Here are a few questions to ask you.
1. What role does type.js play in the whole structure of vuex? I didn"t see it when I was learning vuex. Why did I write it this way? Does it have to be written like this?
2, there are some methods for action.js in vuex, but not all of them, that is, why / / address

[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));
    })
},

is also the method in vuex, some methods are written in [type.SET_ADDRESS] above, and some can be used directly like del, so why write two?
3. As soon as vuex refreshes the browser, then the state data in vuex disappears. I found localstorage,. Is this the best way?