/src/store/index.js文件的所需内容state:{  //state中存在的数据        num:0,        age:19,        msg:"jiajia",    },mutations:{        setNum(state,val){            state.num=val;        }},

第一种：直接访问

姓名：{{$store.state.msg}}

第二种：利用计算属性

将想要用到的全局state数据，防止到组件的computed内部使用，v-model的内容将其获取和设置分开即可

`姓名：{{msg}}`

`年龄：{{age}}`

`数字：{{num}}`

computed: { age:function(){ //msg也相同，就没写 return this.$store.state.age }, num:{ get:function(){ return this.$store.state.num; }, set:function(num){ //数据双向绑定 this.$store.commit('setNum',num) } } },

第三种：mapState 数组

`姓名：{{msg}}`

`年龄：{{age}}`

`数字：{{num}}`

import { mapState } from 'vuex' //需要引入mapStatecomputed:mapState(['age','msg','num']), methods: { changeVal(e){ //设置值 return this.$store.commit('setNum',e.target.value) } },

第四种：mapState 对象

`姓名：{{msg}}`

`年龄：{{age}}`

`数字：{{num}}`

import { mapState } from 'vuex' //需要引入mapStatecomputed:mapState({ msg:'msg', num:'num', // age:(state)=>state.age, //不需要大括号的时候，就不需要用 return 返回值 age:(state)=>{ return state.age}, })

第五种：mapState 对象解构追加变量

`姓名：{{msg}}`

`年龄：{{age}}`

`数字：{{num}}`

import { mapState } from 'vuex'let objMapState=mapState({ msg:'msg', num:'num', // age:(state)=>state.age, age:function(state){ return this.greenColor+state.age}, })data() { return { greenColor:'blue' } },computed:{ ...mapState(objMapState) }

data中的数据如何在innerhtml中调用_Vuex中调用state数据相关推荐

mutations vuex 调用_Vuex中的Mutations的具体使用方法
在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 muta ...
android 活动传递数据,如何在Android应用程序的“活动”之间传递数据？
我有一种情况,在通过登录页面登录后,每个activity上都会有一个退出button . 点击sign-out ,我将传递已登录用户的session id以便退出. 谁能指导我如何使session i ...
mutations vuex 调用_Vuex中mutations和actions的区别
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 Mutation 更改 Vuex 的 sto ...
chart.js ajax 折线图,如何在ChartJs 的折线图中显示数据值或索引标签
如何在Chartjs的折线图中显示数据值或索引值,如图所示: 图例.PNG 简介 Chart.js是一款不依赖任何外部js库的图标插件,具体的使用方法可查看Chart.js官网. 需求 Chart.j ...
如何在RTSP/RTMP直播过程中加入SEI扩展数据发送和接收解析
在直播系统中,除了直播音视频之外,有时候还想从主播端发布文本信息等,这些信息可以不通过视频传输通道发送给用户播放端,但如果传输的数据想和视频保持精准同步,那最好的办法就是这些信息和视频数据打包在一起传 ...
java中的映像存储数据,如何在GCE和容器映像上使用持久存储
我有一个上传到GCP容器注册表的docker镜像,其中包含在TomEE上运行的Web应用程序和用于数据持久性的postgres . 我创建了一个计算引擎实例,并使用如下命令在端口8443上公开了HTT ...
vue项目如何在data里调用methods中的方法
vue项目如何在data里调用methods中的方法比如使用swiper组件在data里调用methods中函数的方式:data在vue项目里实际也是个函数,所以只要如下操作就行: data() { ...
R语言使用data.table包中的merge函数连接（内连接）两个dataframe数据（Inner join）
R语言使用data.table包中的merge函数连接(内连接)两个dataframe数据(Inner join) 目录 R语言使用data.table包中的merge函数连接(内连接)两个dataf ...
html img调用js,html调用js变量如何在html中输出js文件中的变量
html页面代码中怎么调用js变量?html页面代码中怎么调用js变量,例如在html代码中插入js代码: a=取浏览你把index1.js 中的onReady 去掉,把index1.js改成 fu ...

data中的数据如何在innerhtml中调用_Vuex中调用state数据

姓名：{{$store.state.msg}}

`姓名：{{msg}}`

`年龄：{{age}}`

`数字：{{num}}`

`姓名：{{msg}}`

`年龄：{{age}}`

`数字：{{num}}`

`姓名：{{msg}}`

`年龄：{{age}}`

`数字：{{num}}`

`姓名：{{msg}}`

`年龄：{{age}}`

`数字：{{num}}`

data中的数据如何在innerhtml中调用_Vuex中调用state数据相关推荐

最新文章

热门文章