store/index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { msg:"Hello Vuex!", name:"cxj", age:18, hobby:"美女" }, getters: { tenYearsOld(state){ return state.age + 10; }, }, mutations: { changeMsg(state,payload){ console.log("changeMsg mutations"); state.msg = payload; } }, actions: { getMsg({commit},msg){ console.log("changeMsg actions"); setTimeout(() => { commit("changeMsg",msg) }, 2000); } }, modules: { } })App.vue
<template> <div id="app"> {{msg}} <hr /> <button @click="asyncChangeMsg">点我改变msg-async</button> <br /> <button @click="masyncChangeMsg('Hello vuex! mapActions')">点我改变msg-async-mapActions</button> </div> </template> <script> import { mapState, mapActions } from "vuex"; /* Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态(避免异步带来的状态混乱)；Action 可以包 含任意异步操作。 在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store） */ export default { name: "App", components: {}, computed: { ...mapState(["msg", "name", "age"]) }, methods: { ...mapActions({ masyncChangeMsg: "getMsg" }), asyncChangeMsg() { this.$store.dispatch("getMsg", "Hello vuex! dispatch"); } } }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>效果截图-dispatch：
效果截图-mapActions：
