码迷,mamicode.com
首页 > 其他好文 > 详细

详解Vuex常见问题

时间:2018-05-24 21:50:45      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:开发   长度限制   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>

 

详解Vuex常见问题

标签:开发   长度限制   default   常见问题   else   需要   参数   pre   request   

原文地址:https://www.cnblogs.com/goloving/p/9080005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!