专栏首页十月梦想vex实现单文件组件的数据共享

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
    }
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 二维数组遍历实例

    十月梦想
  • JavaScript数据类型

    null,undefined,boolean,number,string,object

    十月梦想
  • 文本属性

      注意:text-shadow(文本阴影):第一个值表示水平阴影 第二个垂直 第三模糊距离第四个模糊像素

    十月梦想
  • PHP自动(智能)识别地址到表单

    地址自动识别现在普遍,特别是用在快递填写地址,姓名,手机号码的时候,会把这些按照一定的规范填写后,点击自动识别后,会自动填写到各自的input。最近也简单的实现...

    码农程序
  • 让CarbonData使用更简单

    我之前写过一篇使用的文章。CarbonData集群模式体验。到0.3.0版本,已经把kettle去掉了,并且我提交的PR已经能够让其在Spark Streami...

    用户2936994
  • 定制交叉编译环境-gcc

    用户3765803
  • C++反汇编与逆向分析技术揭秘

    《C++反汇编与逆向分析技术揭秘》从介绍调试工具开始,到语言特性的分析,反汇编代码的重建等,再到逆向分析技术应用,内容逐步深入。软件分析技术重在方法,所以《C+...

    用户3157710
  • Yii2 UploadedFile上传文件

    原文链接:https://blog.csdn.net/lilongsy/article/details/84620377

    双面人
  • golang的http与twirp源码分析

    在ListenAndServe方法中,使用Handler构建一个Server对象,最终调用其Server方法

    歪歪梯
  • shell脚本编程入门

    什么是Shell脚本 示例 看个例子吧: #!/bin/sh cd ~ mkdir shell_tut cd shell_tut for ((i=0; i<1...

    wangxl

扫码关注云+社区

领取腾讯云代金券