下面是store文件夾下的state.js和index.js內容

state.js

//state.js const state = {headerBgOpacity:0,loginStatus:0,count:66 }export default state

index.js

//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組件當中使用vuex的state狀態對象

---

方法一：

<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([ //步驟二,數組方式"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>

總結

以上是生活随笔為你收集整理的在vue组件中使用vuex的state状态对象的5种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。