解决uni-app使用vuex刷新后数据失效

2019-11-01 admin

vuex的数据是可以响应式更新,但是刷新数据就会失效。 缓存的数据刷新后不会丢失,但是不会响应式更新。 所以可以利用二者优劣势相结合解决vuex刷新后数据丢失

思路: 在存vuex数据的时候顺便存进缓存里面,然后在应用刷新的时候获取缓存存进vuex,这样缓存和vuex相结合可以方便项目数据存储

1.在把数据存进vuex的时候就设置缓存

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        hasLogin: false,
        userinfo: {},
    },
    mutations: {
        // 登录
        login(state,res) {
            state.hasLogin = true
            state.userinfo = res
            uni.setStorage({
                key: 'userinfo',
                data: res
            })
            console.log(state.userinfo)
            console.log(state.hasLogin)
        }
    }
})

export default store

2.获取用户信息时调用vuex方法存数据

getUserData() {
        uni.request({
            url: this.apiUrl + 'small/index/indexme', 
            data: {
                openid: uni.getStorageSync('openid')
            },
            method: 'POST',
            success: (res) => {
                if(res.data.status == 1) {
                    console.log(res.data)
                    store.commit('login', res.data.user) // vuex的方法
                } else {
                    uni.showToast({
                        title: res.data.msg,
                        duration: 2000
                    })
                }
            }
        })
    },

3.在应用刷新时获取缓存存进vuex

<script>
    import { mapState, mapMutations} from 'vuex'
    export default {
        onLaunch: function() {
            console.log('App Launch')
            let openid = uni.getStorageSync('userinfo').openid // 判断有没有openid,有则说明登录过了,重新把缓存存进vuex
            if (openid) {
                uni.getStorage({
                    key: 'userinfo',
                    success: (res) => {
                        this.login(res.data)
                    }
                })
            }
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
        methods: {
            ...mapMutations(['login']),
        }
    }
</script>

<style>
    /*每个页面公共css */
    @import url("./static/iconfont/iconfont.css");
html {
    background-color: #f5f5fd;
}
</style>

这样刷新,vuex的数据也不会失效

[转载]原文链接:https://segmentfault.com/a/1190000020880434

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78760.html

文章标题:解决uni-app使用vuex刷新后数据失效

相关文章
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
回到顶部