store状态管理

2021-09-21 13:32:18 阅读：142 来源： 互联网

标签：状态管理 getUser state userinfo data response store

配置store


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


//相当于java里面创建实体类
Vue.use(Vuex);
export default new Vuex.Store({
    //状态
    state: {
        //从localStorage里面获取值
        userinfo: JSON.parse(localStorage.getItem("userinfo "))
        // userinfo: localStorage.getItem("userinfo ")
    },
    mutations: {
        //从一些方法里面创建axios中获取数据放进这个变量里面，如果是对象的话要转换json
        SET_USERINFO: (state, userinfo) => {
            state.userinfo = userinfo;
            localStorage.setItem("userinfo ", JSON.stringify(userinfo));
        }
    },
    //创建get方法  让其他方法获得state状态，这个状态里面拥有数据
    getters: {
        getUser: state => {
            return state.userinfo;
        }
    },
    // actions: {},
    // modules: {}
});

然后需要在main.js里面注册

new Vue({
    render: h => h(App), //跳到视图的展示vue
    // 主函数调用路由
    router,
    store,
}).$mount('#app')
//=== el:"#app",也就是挂载到id为app的标签里面

配置页面，进行后端存值

<template>
  <el-form
      :model="user"
      :rules="rules"
      ref="user"
      label-width="100px"
      class="logintest-ruleForm"
  >
    <el-form-item label="账号" prop="name">
      <el-input v-model="user.name"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="user.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('user')"
      >登录
      </el-button
      >
      <el-button @click="resetForm('user')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  name: "loginTest",

  data() {
    return {
      user: {
        name: '',
        password: '',
      },

      rules: {
        name: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur',
          },
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },


  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.$axios.post('/mybatis_plus/user/getUser', this.user).then(response => {
                //把返回的值放进store里面 
                this.$store.commit("SET_USERINFO", response.data)
                alert(response.data)
                alert(response.data.name)
                alert(response.data.password)
                // if (response.data.eq('fail')){
                //   this.$router.replace("/loginTest")
                // }
                  this.$router.replace("/index")
              }
          )
          //  业务逻辑  登录业务，向后端请求端口
        } else {


          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  }
}

</script>

<style scoped>
.logintest-ruleForm {
  margin: auto;
  width: 40%;
  /*border: 3px solid green;*/
  padding: 10px;
}

</style>

进行前端取值，把值放进usesrinfo里面，因为只是存一个值，所以收到的是一个对象的json。

  data() {
    return {
      userinfo: '',
    }
  },
  methods: {
    getUser() {
      this.userinfo = this.$store.getters.getUser;
    }
  },
  created() {
    this.getUser();
  }

在这里插入图片描述

标签：状态,管理,getUser,state,userinfo,data,response,store
来源： https://blog.csdn.net/lesliesuai/article/details/120400767

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

store状态管理

配置store