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

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