vuex中存储和获取后台数据
例,登录接口存储后台返回的数据1,定义登录接口函数2,在vuex的actions中定义函数import { login } from "../../api/login"const actions = {getLogin({ commit }, userInfo) {const { username, password } = userInforeturn ne...
·
例,登录接口存储后台返回的数据
1,定义登录接口函数
2,在vuex的actions中定义函数
import { login } from "../../api/login"
const actions = {
getLogin({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
console.log(response)
commit('SET_USER', response)
resolve()
}).catch(error => {
reject(error)
})
})
},
};
3,在登录页面中调用actions中的方法
this.$store.dispatch函数的第一个参数是actions中函数名 第二个参数是需要传入的数据
这里Login/getLogin 是因为我的代码将vuex模块化封装后,store/modules/Login.js的actions里面的getLogin函数
this.$store.dispatch('Login/getLogin', this.ruleForm).then(res=>{
this.$router.push("/layout");
this.loading = false;
});
这样就可以存入数据了
获取数据可以去另一个页面
import { mapState, mapGetters, mapActions } from "vuex";
computed: {
...mapGetters(["userList"])
},
created() {
console.log(this.userList);
},
更多推荐
已为社区贡献19条内容
所有评论(0)