使用vuex的state狀態(tài)對象的5種方式
更新時間：2018年04月19日 10:05:03 作者：rain129
本文給大家介紹了使用vuex的state狀態(tài)對象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
vuex是一個專門為vue.js設(shè)計的狀態(tài)管理模式，并且也可以使用devtools進行調(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)對象
方式一
<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({ //步驟二,對象方式
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([ //步驟二，三個點方式
"count"
])
}
}
</script>
<style>
</style>
以上是使用vuex的state狀態(tài)對象的5種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue通過ollama接口調(diào)用開源模型實現(xiàn)人機對話功能
文章介紹了如何在本地安裝ollama并配置開源大模型,以及如何通過JavaScript和Vue.js實現(xiàn)人機對話功能,感興趣的朋友一起看看吧2024-11-11
使用Vue Router進行路由組件傳參的實現(xiàn)方式
Vue Router 為 Vue.js 應(yīng)用提供了完整的路由解決方案,其中包括了組件間的數(shù)據(jù)傳遞功能,通過路由組件傳參,我們可以輕松地在導(dǎo)航到新頁面時傳遞必要的數(shù)據(jù),本文將深入探討如何使用 Vue Router 進行路由組件間的傳參,并通過多個示例來展示其實現(xiàn)方式2024-09-09
這篇文章主要為大家詳細介紹了vue自定義開發(fā)滑動圖片驗證組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
element el-table如何實現(xiàn)表格動態(tài)增加/刪除/編輯表格行(帶校驗規(guī)則)
這篇文章主要介紹了element el-table如何實現(xiàn)表格動態(tài)增加/刪除/編輯表格行(帶校驗規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進行增刪改,感興趣的朋友跟隨小編一起看看吧2024-07-07
使用Vue3+PDF.js實現(xiàn)PDF預(yù)覽功能
項目中有一個需要預(yù)覽下載pdf的需求,網(wǎng)上找了很久,決定使用 pdf.js 完成,下面這篇文章主要給大家介紹了關(guān)于使用Vue3+PDF.js實現(xiàn)PDF預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue-cli2打包前和打包后的css前綴不一致的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue-seamless-scroll無縫滾動組件使用方法詳解
這篇文章主要為大家詳細介紹了vue-seamless-scroll無縫滾動組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue使用技巧及vue項目中遇到的問題,本文給大家?guī)淼闹皇且徊糠?，后續(xù)還會持續(xù)更新，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
Vue.js中的插槽（slot）是一種機制，允許你在組件的模板中預(yù)留一些位置，以便父組件可以將任意內(nèi)容插入到這些位置，這使得組件更加靈活和可復(fù)用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下2024-03-03
vue項目打包部署到nginx后css樣式失效的問題及解決方法
我將自己的前端Vue項目,經(jīng)過build生成的dist文件夾copy到nginx的html文件夾中,然后寫了配置文件,運行訪問后發(fā)現(xiàn)頁面css樣式?jīng)]有加載到,下面給大家介紹vue項目打包部署到nginx后css樣式失效的問題及解決方法,感興趣的朋友一起看看吧2024-12-12