//页面组件中
computed: {
…mapState([“uname”]),
},
//页面使用
欢迎:{{uname}}
需要注意,Vuex 中的变量只能读取不能直接修改,所以需要放在 computed 中当作计算属性使用。
2.修改 Vuex 下 state 属性中的变量
当需要修改 state 中的变量时要在 Vuex 中的 mutations 中定义修改函数;同理需要在页面组件中先引入 mutations 方法的函数;
import { mapMutations } from “vuex”;
在 Vuex 中定义修改函数;
//Vuex中
mutations: {
//第一个形参必须是state 第二个形参为新值
setUid(state, uid) {
state.uid = uid;
},
setUname(state, uname) {
state.uname = uname;
}
},
组件中定义修改函数,注意是在页面组件 export default{ } 中的 method 中定义;
methods: {
…mapMutations([“setUname”]),
setUname(){ }
},
3.在 Vuex 中发送 Ajax 请求
举例:在 Vuex 中定义 Ajax 请求实现登录效果
(1)首先需要在 Vuex 中顶部提前引入 axios;
import axios from “axios”
(2)Vuex 中 actions 函数内添加 vlogin 函数;
(3)在 vloin 函数内发送 axios 请求,并接受返回值;
(4)如返回登陆成功的结果,则调用 Vuex 大环境中的 setUid() 和 setUname() 两个函数,将服务器返回的 uid 和 uname 两个值设置到 State 中的 uid 和 uname 两个属性上;
(5)如果返回失败的结果,则直接调用 alert,提示失败。
//Vuex中
import Vue from ‘vue’
import Vuex from ‘vuex’
import axios from “axios”
Vue.use(Vuex)
export default new Vuex.Store({
state: {
uid: -1,
uname: “匿名”
},
mutations: {
setUid(state, uid) {
state.uid = uid;
},
setUname(state, uname) {
state.uname = uname;
}
},
// 异步
actions: {
// 预留
// 整个vuex环境
// 第一个参数必须是context,意为上下文
vlogin(context, obj) {
return new Promise(
function (resolve, reject) {
axios.post(
“/users/signin”,
//如果传入的obj是:{uname:xxx,upwd:xxx}
obj
).then(result => {
if (result.data.ok == 1) {
context.commit(
“setUid”, result.data.uid
);
context.commit(
“setUname”, result.data.uname
)
resolve();
} else {
reject(result.data.msg);
}
})
}
)
}
},
modules: {}
})
//登陆组件中