詳解使用vuex的state狀態物件的5種方式
阿新 • • 發佈:2018-12-05
vuex是一個專門為vue.js設計的狀態管理模式,並且也可以使用devtools進行除錯。
下面是store資料夾下的state.js和index.js內容
//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 })//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
下面開始在test.vue元件當中使用vuex的state狀態物件 方式一
<template> <div class="test"> {{$store.state.count}} <!--第一種方式--> </div> </template> <script type="text/ecmascript-6"> export default{ name:'test', data(){ return{ } }//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860 } </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{}
},//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
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{}
},//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
computed:mapState([ //步驟二,陣列方式
"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"
])//歡迎加入前端全棧開發交流圈一起學習交流:864305860
}//面向1-3年前端人員
}//幫助突破技術瓶頸,提升思維能力
</script>
<style>
</style>
結語
感謝您的觀看,如有不足之處,歡迎批評指正。