一、理解
this.$store.dispatch 分发 actions-> 调用 mutations->改变 states
二、思考
1、为什么不直接分发 mutation
mutation 有必须同步执行的限制,而 Action 不受约束,可以在 action 内部执行异步操作
2、Action 通常是异步的,如何知道 action 什么时候结束?如何才能组合多个 action,处理复杂的异步流程
store.dispatch 可以处理被触发的 action 的处理函数返回 Promise,并且 store.dispatch 仍旧返回 Promise
引用官网举例:
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行
三、比较
1、相同点
都可以修改 state,并且也会触发视图的更新
2、 不同点
this.$store.dispatch() :含有异步操作,例如向后台提交数据,写法:this.$store.dispatch(‘action方法名’,值)
this.$store.commit():同步操作,,写法:this.$store.commit(‘mutations方法名’,值)
commit 调用的是 vuex 中 mutation 里的方法,存在同步限制;
dispatch 调用的数 vuex 中 action 里的方法,action 中可以调用 mutation 中的函数,也可执行异步操作;
commit:同步操作
// 存储
this.$store.commit('chgval',name);
// 取值
this.$store.state.chgval;
dispatch:异步操作
// 存储
this.$store.dispatch('listdata',name);
// 取值
this.$store.getters.listdata;
四、案例
Vuex文件 src/store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
// state专门用来保存 共享的状态值
state: {
// 保存登录状态
login: false
},
// mutations: 专门书写方法,用来更新 state 中的值
mutations: {
// 登录
doLogin(state) {
state.login = true;
},
// 退出
doLogout(state) {
state.login = false;
}
}
});
组件JS部分 : src/components/Header.vue
<script>
// 使用vux的 mapState需要引入
import { mapState } from "vuex";
export default {
// 官方推荐: 给组件起个名字, 便于报错时的提示
name: "Header",
// 引入vuex 的 store 中的state值, 必须在计算属性中书写!
computed: {
// mapState辅助函数, 可以快速引入store中的值
// 此处的login代表, store文件中的 state 中的 login, 登录状态
...mapState(["login"])
},
methods: {
logout() {
this.$store.commit("doLogout");
}
}
};
</script>
组件JS部分 : src/components/Login.vue
<script>
export default {
name: "Login",
data() {
return {
uname: "",
upwd: ""
};
},
methods: {
doLogin() {
console.log(this.uname, this.upwd);
let data={
uname:this.uname,
upwd:this.upwd
}
this.axios
.post("user_login.php", data)
.then(res => {
console.log(res);
let code = res.data.code;
if (code == 1) {
alert("恭喜您, 登录成功! 即将跳转到首页");
// 路由跳转指定页面
this.$router.push({ path: "/" });
//更新 vuex 的 state的值, 必须通过 mutations 提供的方法才可以
// 通过 commit('方法名') 就可以出发 mutations 中的指定方法
this.$store.commit("doLogin");
} else {
alert("很遗憾, 登陆失败!");
}
})
.catch(err => {
console.error(err);
});
}
}
};
</script>