使用vuex的state狀態(tài)對(duì)象的5種方式
更新時(shí)間：2018年04月19日 10:05:03 作者：rain129
本文給大家介紹了使用vuex的state狀態(tài)對(duì)象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
vuex是一個(gè)專門為vue.js設(shè)計(jì)的狀態(tài)管理模式，并且也可以使用devtools進(jìn)行調(diào)試。
下面給大家來貼一下我的vuex的結(jié)構(gòu)
下面是store文件夾下的state.js和index.js內(nèi)容
//state.js
const state = {
headerBgOpacity:0,
loginStatus:0,
count:66
}
export default state
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import getters from './getters'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
state,
actions,
getters,
mutations
})
下面開始在test.vue組件當(dāng)中使用vuex的state狀態(tài)對(duì)象
方式一
<template>
<div class="test">
{{$store.state.count}} <!--第一種方式-->
</div>
</template>
<script type="text/ecmascript-6">
export default{
name:'test',
data(){
return{ }
}
}
</script>
<style>
</style>
方式二
<template>
<div class="test">
{{count}} <!--步驟二-->
</div>
</template>
<script type="text/ecmascript-6">
export default{
name:'test',
data(){
return{}
},
computed:{
count(){
return this.$store.state.count; //步驟一
}
}
}
</script>
<style>
</style>
方式三
<template>
<div class="test">
{{count}} <!--步驟三-->
</div>
</template>
<script type="text/ecmascript-6">
import {mapState} from 'vuex' //步驟一
export default{
name:'test',
data(){
return{}
},
computed:mapState({ //步驟二,對(duì)象方式
count:state => state.count
})
}
</script>
<style>
</style>
方式四
<template>
<div class="test">
{{count}} <!--步驟三-->
</div>
</template>
<script type="text/ecmascript-6">
import {mapState} from 'vuex' //步驟一
export default{
name:'test',
data(){
return{}
},
computed:mapState([ //步驟二,數(shù)組方式
"count"
])
}
</script>
<style>
</style>
方式五
<template>
<div class="test">
{{count}} <!--步驟三-->
</div>
</template>
<script type="text/ecmascript-6">
import {mapState} from 'vuex' //步驟一
export default{
name:'test',
data(){
return{}
},
computed:{
...mapState([ //步驟二，三個(gè)點(diǎn)方式
"count"
])
}
}
</script>
<style>
</style>
以上是使用vuex的state狀態(tài)對(duì)象的5種方式，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
axios模塊化封裝實(shí)例化及vue本地解決跨域方案
這篇文章主要為大家介紹了axios模塊化封裝實(shí)例化及vue本地解決跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式
最近工作中遇到了報(bào)錯(cuò),現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
vue3使用keep?alive實(shí)現(xiàn)前進(jìn)更新后退銷毀
這篇文章主要為大家介紹了vue3中使用keep?alive實(shí)現(xiàn)前進(jìn)更新后退銷毀示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
基于Vue中使用節(jié)流Lodash throttle詳解
今天小編就為大家分享一篇基于Vue中使用節(jié)流Lodash throttle詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包為exe可安裝程序操作步驟的相關(guān)資料,Vue是一種流行的JavaScript框架,用于構(gòu)建單頁面應(yīng)用程序(SPA),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家介紹了vue3?emits事件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章給大家介紹Vue仿手機(jī)qq的實(shí)例代碼，需要的的朋友參考下吧2017-09-09
vue中動(dòng)態(tài)出來返回的時(shí)間秒數(shù)(在多少秒顯示分、小時(shí)等等)
這篇文章主要給大家介紹了關(guān)于vue中動(dòng)態(tài)出來返回的時(shí)間秒數(shù)(在多少秒顯示分、小時(shí)等等)的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01