解决vuex刷新状态初始化的方法实现
vuex五种基本对象
- state：存储状态（变量）
- getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用$sotre.getters.fun()
- mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
- actions：异步操作。在组件中使用是$store.dispath('')
- modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
npm install vuex -S // 安装vuex
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import temp from '@/store/modules/temp'
Vue.use( Vuex ); // 挂载在vue
const store = new Vuex.Store({
modules: {
temp,
}, state: {
}, getters: {
}, mutations: {
},
});
export default store; // 抛出
src/store/modules/temp.js
const Storage = sessionStorage
const tempInfo = {
state: { // 设置全局访问的state对象
tempData: Storage['SET_TEMP_DATA'] ? JSON.parse(Storage['SET_TEMP_DATA']) : {}, // 设置初始化的值(Storage中是否存在，存在则获取，不存在则默认赋值{})
}, mutations: { // 自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
SET_TEMP_DATA(state, tempData) {
state.tempData = tempData
},
}, actions: {
SetData({ commit }, tempData) {
commit('SET_TEMP_DATA', tempData); // 同步操作
Storage.setItem('SET_TEMP_DATA', JSON.stringify(tempData))
}
}, getters: { // 实时监听state值得变化（最新状态）
tempData: (state) => {
return state.tempData
}
}
}
export default tempInfo;
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store/index' //vuex 状态管理
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // 使用store
components: { App },
template: '<App/>'
})
src/index.vue
<template>
<div class="move-forward">
<div @click="click">点击改变vuex值</div>
</template>
<script>
export default {
methods: {
click() {
let aa = this.$store.getters.tempData.aaa*1
this.$store.dispatch('SetData', {"aaa": aa += 1})
},
}
}
</script>
其他
当然还可以使用vuex-persistedstate、vuex-along等这些第三方插件。
npm i -S vuex-persistedstate或npm i -S vuex-along
import Vue from 'vue'
import Vuex from 'vuex'
import temp from '@/store/modules/temp'
import createPersistedSatte from 'vuex-persistedstate' // 引入
Vue.use( Vuex );
const store = new Vuex.Store({
modules: {
temp,
}, state: {
}, getters: {
}, mutations: {
},
plugins: [createPersistedSatte()], // 挂载插件
});
export default store
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现导航栏效果（选中状态刷新不消失）
Vue导航栏 用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标全是UI给的选中和未选中样式的图片,根据公司要求,你也可能会用fontsize去写.(全部代码黏贴到本文的最后面了) 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未
-
解决vue router组件状态刷新消失的问题
场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})跳转到主页,并在主页显示数据.但是当刷新页面时,由于并不是通过登录接口进入主页,router中没有'params: res.data'信息,主页无法获取到登录信息. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页
-
详解VUE的状态控制与延时加载刷新
在实际项目中,我们经常会遇到这种状况,某些数据我们希望等到需要的时候再去获取,或者某些数据我们需要刷新,但是不必立刻刷新,而是延时到展示的时候再去刷新. 在DOM操作的年代,想要实现这样的功能可能会稍微麻烦一些,然而当我们使用数据驱动的mv*框架的时候,这个想要实现这个需求就容易了许多. 当我们理解数据驱动时,我们很容易想到将需要刷新的状态也设置成为某个数据,在需要刷新的地方watch这个数据,当刷新状态发生变动的时候,watch生效并执行刷新的方法,这就实现了延时刷新.而且我们不再需要关注延时
-
vue单页应用在页面刷新时保留状态数据的方法
在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一.问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案 在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的
-
解决vuex刷新状态初始化的方法实现
vuex五种基本对象 state:存储状态(变量) getters:对数据获取之前的再次编译,可以理解为state的计算属性.我们在组件中使用$sotre.getters.fun() mutations:修改状态,并且是同步的.在组件中使用$store.commit('',params).这个和我们组件中的自定义事件类似. actions:异步操作.在组件中使用是$store.dispath('') modules:store的子模块,为了开发大型项目,方便状态管理而使用的.这里我们就不解释了,
-
Ajax解决多余刷新的两种方法(总结)
控制器Servlet则提供了简单的改变: 对于Ajax系统而言,服务器响应无须是整个页面内容,可以仅是 必需的数据,控制器不能将数据请求转发到jsp页面. 此时控制器有两个选择: 1.直接生成简单的响应数据. 在这种模式下,Servlet直接通过response获取页面输出流,通过 输出流生成字符响应. package pers.zkr.chat.web; import java.io.IOException; import java.io.PrintWriter; import javax.s
-
解决vuex刷新数据消失问题
前言 vue构建的单页大型项目中,可能会用到Vuex .Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新. 但是有一个问题就是:vuex的存储的数据只是在页面的中,相当于我们定义的全局变量,刷新之后,里边的数据就会恢复到初始化状态.但是这个情况有时候并不是我们所希望的. 比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加? 解
-
解决VUEX刷新的时候出现数据消失
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一个问题是:我在一个组件(例如登录组件页面)中登录了后,其它页面要怎么获取和响应这个变化?(就是这么小白,/(ㄒoㄒ)/~~) 这个答案就是使用vuex啦,在中文版的文档中有这样一句话: 而这里的计算属性就是我们的伟大的computed属性啦~ (至于前面的通过mutation之类的把数据存入vuex
-
解决vuex数据页面刷新后初始化操作
在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 1.利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中:下面是我在mutation中写的方法: 同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改:但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用
-
vuex刷新后数据丢失的解决方法
导语: 我们在写vue项目的时候,经常要用到vuex作为内存来储存,但是我们存放在vuex中的数据(用户数据,当前页面的数据等等)在刷新后就会丢失,那么如何解决呢?超级简单. 1,安装vuex-persistedstate npm install --save vuex-persistedstate 2,修改store import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ sta
-
vuex结合session存储数据解决页面刷新数据丢失问题
目录 前言 一.原因: 二.解决思路: 1.本地存储方法: 2.实现步骤: 3.优化: 前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上. 在项目中是使用vuex保存数据,但是网页刷新后,store中保存的数据丢失了. 提示:以下是本篇文章正文内容,下面案例可供参考 一.原因: vuex作为全局的数据状态管理机制,store中的数据是保存在运行内存中,当页面刷新时,页面会重新加载vue实例,store里边的数据就会被重新赋值变成初始化状态. 二.解决思路: 将
-
vuex刷新页面后如何解决丢失store的数据问题
目录 vuex刷新页面后丢失store的数据 提出问题 解决方案 vuex刷新页面数据丢失(数据持久化) 存储到localStorage中 存储到sessionStorage中 指定数据持久化 总结 vuex刷新页面后丢失store的数据 提出问题 最近遇到个问题,vue中vuex中的store数据,会在页面刷新后初始化,为了解决这一问题决定将store里面数据在页面刷新前保存到sessionStorage,至于为何用他,因为页面关闭后他会被清空,localStorage则会一直存在,cooki
-
解决vuex数据异步造成初始化的时候没值报错问题
当使用vue做登录的时候,我们会把拿到的部分用户信息存在vuex+cookie中,我们知道,vuex的数据是会随着浏览器刷新而丢失的,此时我们会重新请求接口对vuex的数据进行再次赋值,如下 当有cookie但是vuex没有数据的时候再次请求赋值 state mutation vuex的数据是异步的,当我们页面需要直接拿vuex的值进行渲染的时候,初始化瞬间(即请求过程进行的时候),vuex是没有这个值的,如何解决这个问题,暂时总结了三种方法,希望有遇到的大佬进行补充和查错: 1.通过watch