vex实现单文件组件的数据共享
什么是vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
安装vuex
npm install vuex --save官方vuex图示
首先使用vuex,你要有一个管理数据的store,从组建到actions再到mutaions中单项数据流改变store中的sate中数据,实现视图层的数据更新!
使用vuex
import vuex form "vuex"
export default new Vuex.store({
state: {
city: "北京"
}
})vuex实例构建完成
如何调用这个vuex,state中的city?
很简单,使用实例的vue, this.$store.state.city(刺过程成功读取到数据)
修改state的数据(单文件组件调取)
// 触发acticon需要 dispatch派发,事件名字,携带数据,changeCity需要到vuex的store对应的方法,上海是携带的数据
this.$store.dispatch('changeCity', '上海')实例化的vuex的store中actions方法
actions: {
数据简单互换,没有涉及异步可以直接跳过antions,直接从组件到mutaions
changeCity (ctx, city) {
//ctx呈递上下文,用于监听下一步的mutations,city刚才传递的数据
ctx.commit('changeCity', city)
}
}呈递actions下一步的mutations方法
mutations: {
changeCity (state, city) {
//传递两个参数,state仓库的数据管理,city传递下来的数据
state.city = city
}
}vuex中完整的代码
export default new Vuex.Store({
state: {
city: '上海'
},
actions: {
数据简单互换,没有涉及异步可以直接跳过antions,直接从组件到mutaions
changeCity (ctx, city) {
ctx.commit('changeCity', city)
}
},
mutations: {
changeCity (state, city) {
state.city = city
}
}
})假设只是简单的数据修改,无需通过actions,可以直接通过commit方法执行mutations修改
this.$store.commit('changeCity', '上海')vuex实例的代码可以这样直接写,如果涉及到了异步操作需要一步步从组建到actions再到mutaions最后改变state
export default new Vuex.Store({
state: {
city: '上海'
},
mutations: {
changeCity (state, city) {
state.city = city
}
}
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-9-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
