/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数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。