Vue状态管理Vuex里面的变量修改

最新推荐文章于 2024-05-15 18:58:46 发布

原创最新推荐文章于 2024-05-15 18:58:46 发布 · 748 阅读

本内容遵循CC 4.0 BY-SA版权协议

文章介绍了如何在Vue应用中利用Vuex来管理用户的登录状态，包括在state中存储用户ID和userinfo对象，通过mutations同步更新这些状态，以及在组件中读取和修改这些状态。强调了mutations中的方法应保持同步，异步操作应在获取结果后调用mutations。

一些类似于用户id,用户对象userinfo可以定义在vuex里面，用户登录或者退出调用mutations里面的方法进行更改就可以了，mutations里面的方法不能是异步的，如果再某个页面内有异步网络请求，可以在得到确定的结果后再去调用mutations里面的方法，这样就相当于同步了

import { createStore } from 'vuex'

export default createStore({
  state: {
    id:"",//用户登录后的id
    userinfo:{name:'',phone:""},//用户对象
  },
  getters: {
  },
  mutations: {
    //修改用户id的值
    changeuserid(state,idvalue){
      state.id=idvalue
    },
    //修改用户userinfo对象
    changeuserinfo(state,userinfovalue){
      state.userinfo=userinfovalue
    }
  },
  actions: {
  },
  modules: {
  }
})

在别的地方读取或者修改状态值，例如再App.vue组件内读取并修改这两个状态：

mounted(){
    // console.log("App.vue组件读取main.js的全局变量globalbaseurl：",this.globalbaseurl)
    console.log("App.vue.组件内Vuex状态更改测试")
    console.log("store里面读取状态id",this.$store.state.id)
    console.log("store里面读取状态userinfo",this.$store.state.userinfo)
    console.log("store里面读取状态userinfo.name",this.$store.state.userinfo.name)
    console.log("store里面读取状态userinfo.phone",this.$store.state.userinfo.phone)

    let newinfo={name:'李四',phone:"18810452222"}//新定义的用户对象
    this.$store.commit("changeuserid",202)
    this.$store.commit("changeuserinfo",newinfo)

    console.log("更改之后读取的值----------")
    console.log("store里面读取状态id",this.$store.state.id)
    console.log("store里面读取状态userinfo",this.$store.state.userinfo)
    console.log("store里面读取状态userinfo.name",this.$store.state.userinfo.name)
    console.log("store里面读取状态userinfo.phone",this.$store.state.userinfo.phone)

  }

标签

#vue.js #javascript #前端