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

Question

state.js:conststate={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]}exportdefaultstateaction.js:constactions={//购物车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)}}exportdefaultactionstype.js:exportconstSET_CARTS='SET_CARTS'//加入购物车exportconstSET_ARTICLE='SET_ARTICLE'//文章收藏exportconstSET_GOODS='SET_GOODS'//商品收藏exportconstSET_ORDERS='SET_ORDERS'//订单exportconstSET_ADDRESS='SET_ADDRESS'//地址importstatefrom'./state'import*astypefrom'./type.js'import{MessageBox}from'mint-ui';constmatutaions={//购物车[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));},}exportdefaultmatutaions上述代码源于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

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