标签：开发 长度限制 default 常见问题 else 需要 参数 pre request
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
使用Vue开发项目时，通常我们就会遇到如下几种棘手的问题：
问题1：通过路由传递参数，我们会采用params或者query形式，但这两种方式都会在URL上做手脚，如果传递的参数过多，会导致400 Bad Request（如：点击表格某行，携带行数据跳转到新页面进行查看）。
问题2：兄弟组件传值
问题3：多处地方使用同一数据，为节省重复请求（最为常见）
业务场景：
从A页面携带下钻参数(ID)到B页面，然后B页面获取参数(ID)进行数据请求。由于要下钻的ID过长，受浏览器的URL长度限制问题，我们不能采用常规的prams(xxx.com/B/:ID)或query(xxx.com/B?ID=…)形式传递。可以使用Vuex做中间过渡，跳转前存储ID信息，进入B页面后从Vuex获取ID信息。
如果用户在B页面刷新数据，则Vuex的ID状态值会被清空无法获取，这里只能借助localStorage进行持久化进行处理（当然，如果直接使用localstorage进行持久化存储，而不借助Vuex也是可行的，但就是没了响应式的效果了）
1、Vuex，每次调用mutation之后向localstorage存值，防止刷新丢失
export default {
state:{
reportInfo:null
},
getters:{
reportInfo(state){
if(!state.reportInfo){
state.reportInfo = JSON.parse(sessionStorage.getItem(‘reportInfo‘))
}
return state.reportInfo
}
},
mutations:{
initReport:(state,data) => {
state.reportInfo = data
sessionStorage.setItem(‘reportInfo‘,JSON.stringify(data))
},
changeReportReview:(state,data) => {
state.reportInfo.is_review = data;//改state的reportInfo里的某个值，
同时修改sessionStorage的值，以保证一样
sessionStorage.setItem(‘reportInfo‘,JSON.stringify(state.reportInfo))
}
}
}
2、调用时需要追加模块名称
如上的getters，首先从store中获取，如果store中不存在则从localstorage中获取（刷新）
3、页面中如果有用户登出操作，此时一般需要removeItem，如果页面中有userInfo的判断信息，如下一般需要先做个判断userInfo存在才会去取userInfo.roleName的值，这样就会防止页面报错，类似于后台语言空指针的错误
<span class="el-dropdown-link">
{{userInfo ? (userInfo.account ? userInfo.account : userInfo.phoneNum) : ""}}
<i class="iconfont icon-user"></i>
</span>
<router-link :to="‘/account‘" v-if="userInfo && userInfo.roleName === ‘sys‘">
<el-dropdown-item>添加账户</el-dropdown-item>
</router-link>
如果没有removeItem的操作的话，则是不需要这样的。如下面的reportInfo，因为用户登出的时候，不会影响到它
<div class="suggess_requert" v-if="suggess.suggestion_level === 3">
<div v-if="reportInfo.is_review === 1">
<router-link v-if="userInfo && userInfo.roleName === ‘dba‘" :to="‘/list/review‘">
<h3>提交审核意见</h3>
</router-link>
<h3 v-else>专家正在审核，请稍后</h3>
</div>
<router-link v-else-if="reportInfo.is_review === 2" :to="‘/list/reviewInfo/‘ + reportInfo.report_id">
<h3>查看云和恩墨专家团队审核意见</h3>
</router-link>
<div v-else>
<h3 v-if="userInfo && userInfo.roleName === ‘user‘" @click="reviewRequest()">一键请求云和恩墨专家团队帮您二次审核</h3>
</div>
</div>
标签：开发 长度限制 default 常见问题 else 需要 参数 pre request
原文地址：https://www.cnblogs.com/goloving/p/9080005.html
