這篇文章將為大家詳細(xì)講解有關(guān)怎么在vuex中使用state狀態(tài)對(duì)象,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
目前成都創(chuàng)新互聯(lián)公司已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、太子河網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
//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>
關(guān)于怎么在vuex中使用state狀態(tài)對(duì)象就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
網(wǎng)站題目:怎么在vuex中使用state狀態(tài)對(duì)象
網(wǎng)頁(yè)網(wǎng)址:http://bm7419.com/article0/iiosoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、外貿(mào)網(wǎng)站建設(shè)、App開發(fā)、商城網(wǎng)站、做網(wǎng)站、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)