Zusammenfassung der Verwendung des Statusobjekts von vuex

Dieses Mal werde ich Ihnen eine Zusammenfassung der Verwendung des Statusobjekts von Vuex geben. Was sind die Vorsichtsmaßnahmen für die Verwendung des Statusobjekts von Vuex? Hier ist ein praktischer Fall.

Jetzt werde ich die Struktur meines Vuex für Sie veröffentlichen

Das Folgende ist der Inhalt von state.js und index.js im Store-Ordner

//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
})

Beginnen wir mit der Verwendung des Vuex-Statusobjekts in der test.vue-Komponente

Methode 1

<template>
 <p class="test">
  {{$store.state.count}} <!--第一种方式-->
 </p>
</template>
<script type="text/ecmascript-6">
 export default{
  name:'test',
  data(){
   return{ }
  }
 }
</script>
<style>
</style>

Methode 2

<template>
 <p class="test">
  {{count}} <!--步骤二-->
 </p>
</template>
<script type="text/ecmascript-6">
 export default{
  name:'test',
  data(){
   return{}
  },
  computed:{
   count(){
    return this.$store.state.count; //步骤一
   }
  }
 }
</script>
<style>
</style>

Methode 3

<template>
 <p class="test">
  {{count}} <!--步骤三-->
 </p>
</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>

Methode 4

<template>
 <p class="test">
  {{count}} <!--步骤三-->
 </p>
</template>
<script type="text/ecmascript-6">
 import {mapState} from 'vuex' //步骤一
 export default{
  name:'test',
  data(){
   return{}
  },
  computed:mapState([    //步骤二,数组方式
   "count"
  ])
 }
</script>
<style>
</style>

Methode 5

<template>
 <p class="test">
  {{count}} <!--步骤三-->
 </p>
</template>
<script type="text/ecmascript-6">
 import {mapState} from 'vuex' //步骤一
 export default{
  name:'test',
  data(){
   return{}
  },
  computed:{
   ...mapState([       //步骤二，三个点方式
    "count"
   ])
  }
 }
</script>
<style>
</style>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwenden Sie Klassen in ES6, um Vue zu imitieren und eine bidirektionale Bindung herzustellen

Wie man Vue bedient zur Datenübertragung

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des Statusobjekts von vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!