Vuex中调用state数据

第一种:直接访问 <h1>姓名:{{$store.state.msg}}</h1>

第二种:利用计算属性

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

<h1>姓名:{{msg}}</h1>
<h1>年龄:{{age}}</h1>
<h1>数字:{{num}}</h1>
<input type="text" v-model="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 数组

<h1>姓名:{{msg}}</h1>
<h1>年龄:{{age}}</h1>
<h1>数字:{{num}}</h1>
<input type="text" :value="num" @input="changeVal" >

import { mapState } from 'vuex'  //需要引入mapState

computed:mapState(['age','msg','num']),
    methods: {   
        changeVal(e){    //设置值
            return this.$store.commit('setNum',e.target.value)
        }
    },

第四种:mapState 对象

<h1>姓名:{{msg}}</h1>
<h1>年龄:{{age}}</h1>
<h1>数字:{{num}}</h1>

import { mapState } from 'vuex'  //需要引入mapState

computed:mapState({
        msg:'msg',
        num:'num',
        // age:(state)=>state.age,   //不需要大括号的时候,就不需要用 return 返回值
        age:(state)=>{ return state.age},
    })

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


<h1>姓名:{{msg}}</h1>
<h1>年龄:{{age}}</h1>
<h1>数字:{{num}}</h1>

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)
    }
Vuex中调用state数据
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » Vuex中调用state数据

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活