05-vuex基础-actions（异步获取数据）——Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
网址：https://vuex.vuejs.org/zh/guide/actions.html
- 异步获取数据
第一步：定义：
在src/main.js中：
//申明数据
state:{
//申明数据,相当于vue实例中的data
count:1
}
//修改数据
mutations: {
//自增 count 数据
//payload 形参 载荷 （运输数据）
increment (state, n) {
// state.count ++
state.count += n //payload.num也可以直接写payload
}
},
//获取数据
actions:{
//异步获取数据函数 context 运行上下文，运行当前代码中的this，即：vuex实例
asyncGetData(context){
//异步获取数据（需要接口） 模拟异步获取数据
setTimeout(()=>{
//获取数据成功
const data = 10086
//把数据提交mutations
//this 不是vuex实例，所以调用到 mutations中申明的数据 不能使用 this
//console.log(this)
context.commit('increment',data)
},2000)
}
//将来 调用后台接口 需要动态传参
asyncGetData(context,params){
//console.log(params) //显示为100
//异步获取数据（需要接口） 模拟异步获取数据
setTimeout(()=>{
//获取数据成功
const data = 10086
//把数据提交mutations
//this 不是vuex实例，所以调用到 mutations中申明的数据 不能使用 this
//console.log(this)
context.commit('increment',data)
},2000)
}
}
原有：
actions: {
// context 官方运行上下文 获取当前的vuex实例
getData (context) {
// 模拟获取数据的耗时
setTimeout(() => {
const data = { num: 8888 }
// 获取后台的数据成功后
// 通过mutations去修改数据
context.commit('increment', data)
}, 1000)
},
// 带传参 params = {num:9999}
getDataByParams (context, params) {
// 模拟获取数据的耗时
setTimeout(() => {
const data = { num: 8888 }
// 获取后台的数据成功后
// 通过mutations去修改数据
context.commit('increment', data)
}, 1000)
}
}
第二步：
在使用组件com-a.vue中的div里：
<div class='container'>
<button @click="getData()">异步获取数据</button>
</div>
第三步：使用：
在使用组件com-a.vue中的methods里：
methods:{
//调用 vuex 中 提供的actions申明的函数
getData () {
// 发请求获取数据
this.$store.dispatch('asyncGetData')
//this.$store.dispatch('asyncGetData', { id:100 }) //传参
},
}
原有：
methods:{
//调用 vuex 中 提供的actions申明的函数
getData () {
// 发请求获取数据
this.$store.dispatch('getData')
this.$store.dispatch('getDataByParams', { num: 9999 })
},
}
第三步：显示
注意：
什么情况下我应该使用 Vuex？——有组件之间的数据共享，需要时才用，不然太繁琐
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的（流程复杂）。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
vuex提供的管理数据流程：（含使用的方法）——没有父子之间传值简单
1.组件内部Vue Components绑定了一个button的点击事件
2.事件调用了Dishpatch
3.触发了Actions的方法
4.去拿后台数据Backend API，模拟了2s
5.拿到后台数据，通过Commit提交给Mutations
6.提交给Mutations之后，Mutations内部修改了State的状态数据
7.State里面的数据是响应式的
8.当数据修改时，会驱动视图组件页面内容的更新
