vuex基础 (四) 01-actions(异步获取数据)——Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
05-vuex基础-actions(异步获取数据)——Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象网址:https://vuex.vuejs.org/zh/guide/actions.html异步获取数据第一步:定义:在src/main.js中://申明数据state:{//申明数据,相当于vue实例中的data...
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.当数据修改时,会驱动视图组件页面内容的更新
更多推荐
所有评论(0)