Action 类似于mutation，不同在于：
– Action 提交的是mutation，而不是直接变更状态。
– Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。
代码实例
store.js
actions: {
// 商品半价
disCount (content) {
// actions中通过commit()提交mutations中的goodsPriceHalve()函数
content.commit('goodsPriceHalve')
},
// 异步的商品半价
/**
* disCountAsync ({commit}){
setTimeout(() => {
commit('goodsPriceHalve')
},1000)
} */
disCountAsync ({commit}){
setTimeout(() => {
commit('goodsPriceHalve')
},1000)
},
// 统一修改商品名字
/* acyionChangeName()的第一个参数可以理解成是一个对象，第二个参数为事件传递过来的参数
这个参数也需要传递给mutations中相对应的函数中*/
acyionChangeName(content,payload){
// 载荷形式
content.commit('changeName',payload);
},
acyionChangeNameAsync (content,payload){
setTimeout(() => {
// 对象形式
content.commit('changeName',payload.payload)
},1000)
}
}这里有同步也有异步，有载荷也有没有载荷。
page7.vue
<template>
<div>
<h2>我是第五个页面</h2>
<div>
<input type="text" placeholder="请输入商品的新名字" v-model="inpValue">
<button @click="disCountPrice()">同步商品价格减半</button>
<button @click="disCountPriceAsync()">异步商品价格减半</button>
</div>
<ul class="ul_list">
<li v-for="item in goodsListHalv">
<p class="name">商品：{{item.name}}</p>
<p class="price">价格：￥{{item.price}}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
inpValue:'',
}
},
computed: {
goodsListHalv(){
return this.$store.state.goodsList;
}
},
methods: {
// 注意这里使用箭头函数可能会报错
// 同步商品价格减半;触发事件提交actions中的disCount()函数
disCountPrice: function(){
