在vue项目中如何随意拿到登录时的全部信息或者拿到想要的数据

1.store/index.js 创建store对象并导出store

import { createStore } from "vuex";

export default createStore({
  state: {
    userdata: {
      account: "",
      id: "",
      name: "",
      password: "",
      phone: "",
      username: "",
    },
  },
  actions: {
    getdata(ctx, userdata) {
      ctx.commit("getdata", userdata);
    },
  },
  mutations: {
    getdata(state, userdata) {
      state.userdata = null;
      state.userdata = userdata;
    },
  },
});

2.main.js 引入并使用

import store from "./store";
app.use(store);

3.在登录页面点击登录时 将登录信息提交发送给store

this.$store.commit("getdata", res.data.data);

这里可能有些人会疑惑为什么要用dispatch,不用commit,我来给你讲讲......

4.vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

(1)这两个的区别是存取的方式不同，两个都是传值给vuex的mutation改变state
(2)this.$store.dispatch()含有异步操作，可以向后台提交数据

1. this.$store.dispatch("action的方法名",value)
2. 存储 this.$store.commit('changeValue',name)
3. 取值 this.$store.state.changeValue

(3)this.$store.commit()同步操作

1. this.$store.commit("mutations方法名",value)
2. 存储 this.$store.dispatch('getlists',name)
3. 取值 this.$store.getters.getlists

5.在需要的页面使用 this.$store.xxx即可打印想要的数据