详解Vuex常见问题

Posted 2020-11-08 goloving

　　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>