vue获取或者改变vuex中的值方式

 更新时间:2022年09月02日 14:27:34   作者:miao_zz  
这篇文章主要介绍了vue获取或者改变vuex中的值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue获取或改变vuex的值

store–>index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
	isLogin:localStorage.getItem("isLogin")?localStorage.getItem("isLogin"):false,//判断是否登录
  },
  mutations: {
	//判断是否登录
	setLogin(state,payload){
		state.isLogin=payload
		localStorage.setItem("isLogin",state.isLogin)
	},
	//退出登录
	logout(state){
		console.log("[退出登录]",state)
		state.isLogin=false
		localStorage.clear();//清除本地缓存
	}
  },
  actions: {
	getLogin(context,payload){
		context.commit("setLogin",payload)
	}
  },
  modules: {
	
  }
})

在页面中使用或者修改vuex中的值

<script>
	import { mapState, mapActions,mapMutations } from "vuex"
	export default {
		name:"index",
		data() {
			return {
				
			}
		},
		computed:{
			...mapState({
				isLogin:state=>state.isLogin
			}),//等同于==>...mapState(['isLogin']);映射 this.isLogin 为 this.$store.state.isLogin
		},
		mounted(){
			
			console.log("[mapState]",this.isLogin)
			
			this.$store.state.isLogin;//等同于==》this.isLogin
			
			this.$store.dispatch("getLogin",true);//等同于==》this.getLogin(true);dispatch触发actions里的方法,Action 提交的是 mutation,而不是直接变更状态,Action 可以包含任意异步操作
			
			this.$store.commit("logout");//等同于==》this.logout();commit触发mutations里的方法,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
			
			console.log(this.$store.state.isLogin)
			console.log(localStorage.getItem("isLogin"))
		},
		methods:{
			...mapMutations(["logout"]),// 将 `this.logout()` 映射为 `this.$store.commit('logout')`
			...mapActions(["getLogin"]),// 将 `this.getLogin()` 映射为 `this.$store.dispatch('getLogin')`
		}
	}
</script>

监听vuex值变化实时改变

问题如图

头部是一个组件,想在这个页面修改用户名点击确认修改后,头部名称跟到变化。

思路

用户名在登录成功过后,存在vuex里面并且保存在本地(防止刷新消失)

this.$store.commit('set_userName',res.data.data.username)

vuex中state.js :

userName:localStorage.getItem('userName') ? localStorage.getItem('userName') : '',

mutations.js

set_mobile(state,mobile){
    state.mobile=mobile
    localStorage.setItem('mobile', mobile);
  },

要取用户名就用

this.$store.state.userName;

要存用户名就用

this.$store.commit('set_userName',this.newName)

好!!重要的来了,就是在头部组件里面写监听事件,监听用户名改变时,随着变化

watch:{
      '$store.state.userName':function(){ //监听vuex中userName变化而改变header里面的值
        this.userName=this.$store.state.userName;
      }
    },

这样就可以实现在其他页面改变用户名达到实时变化

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue可用于拖动排序组件示例

    vue可用于拖动排序组件示例

    这篇文章主要为大家介绍了vue可用于拖动排序组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vant steps流程图的图标使用slot自定义方式

    vant steps流程图的图标使用slot自定义方式

    这篇文章主要介绍了vant steps流程图的图标使用slot自定义方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue页面不能根据路径进行跳转的解决方法

    vue页面不能根据路径进行跳转的解决方法

    本文主要介绍了vue页面不能根据路径进行跳转的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • vue中使用/deep/失效的解决方法

    vue中使用/deep/失效的解决方法

    这篇文章主要介绍了vue中使用/deep/失效的解决办法,使用了css预处理器,则可以使用/deep/, 如果/deep/ 无效,则使用 ::v-deep,本文给大家讲解的非常详细需要的朋友可以参考下
    2022-11-11
  • vue打开新窗口并实现传参的图文实例

    vue打开新窗口并实现传参的图文实例

    这篇文章主要给大家介绍了关于vue打开新窗口并实现传参的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue项目登录成功拿到令牌跳转失败401无登录信息的解决

    vue项目登录成功拿到令牌跳转失败401无登录信息的解决

    这篇文章主要介绍了vue项目登录成功拿到令牌跳转失败401无登录信息的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • NUXT SSR初级入门笔记(小结)

    NUXT SSR初级入门笔记(小结)

    这篇文章主要介绍了NUXT SSR初级入门笔记(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue+elementui实现拖住滑块拼图验证

    vue+elementui实现拖住滑块拼图验证

    这篇文章主要为大家详细介绍了vue+elementui实现拖住滑块拼图验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 解决ElementUI组件中el-upload上传图片不显示问题

    解决ElementUI组件中el-upload上传图片不显示问题

    这篇文章主要介绍了解决ElementUI组件中el-upload上传图片不显示问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • avue实现自定义搜索栏及清空搜索事件的实践

    avue实现自定义搜索栏及清空搜索事件的实践

    本文主要介绍了avue实现自定义搜索栏及清空搜索事件的实践,主要包括对搜索栏进行自定义,并通过按钮实现折叠搜索栏效果,具有一定的参考价值,感兴趣的可以了解一下
    2021-12-12

最新评论