使用vuex的state状态对象的5种方式


            vuex是一个专门为vue.js设计的状态管理模式，并且也可以使用devtools进行调试。

下面给大家来贴一下我的vuex的结构

下面是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

})



下面开始在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>



以上是使用vuex的state状态对象的5种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！