vuex实现单文件组件的数据共享

什么是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
   }
 }
})



本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《vuex实现单文件组件的数据共享
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!