微客导航 » 文章资讯 » 使用vuex的state状态对象的5种方式

使用vuex的state状态对象的5种方式

2023-09-14 00:27:05 335

vuex是一个专门为vue.js设计的状态管理模式，并且也可以使用devtools进行调试。

下面给大家来贴一下我的vuex的结构

下面是store文件夹下的state.js和index.js内容

//state.js
conststate={
headerBgOpacity:0,
loginStatus:0,
count:66
}
exportdefaultstate
//index.js
importVuefrom'vue'
importVuexfrom'vuex'
importstatefrom'./state'
importactionsfrom'./actions'
importgettersfrom'./getters'
importmutationsfrom'./mutations'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
state,
actions,
getters,
mutations
})

下面开始在test.vue组件当中使用vuex的state状态对象

方式一



exportdefault{
name:'test',
data(){
return{}
}
}

方式二



exportdefault{
name:'test',
data(){
return{}
},
computed:{
count(){
returnthis.$store.state.count;//步骤一
}
}
}

方式三



import{mapState}from'vuex'//步骤一
exportdefault{
name:'test',
data(){
return{}
},
computed:mapState({//步骤二,对象方式
count:state=>state.count
})
}

方式四



import{mapState}from'vuex'//步骤一
exportdefault{
name:'test',
data(){
return{}
},
computed:mapState([//步骤二,数组方式
"count"
])
}

方式五



import{mapState}from'vuex'//步骤一
exportdefault{
name:'test',
data(){
return{}
},
computed:{
...mapState([//步骤二，三个点方式
"count"
])
}
}

以上是使用vuex的state状态对象的5种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

使用vuex的state状态对象的5种方式

热门推荐

随机推荐