So verwenden Sie das Statusobjekt von Vuex-js-Tutorial-php.cn

So verwenden Sie das Statusobjekt von Vuex

不言

Freigeben： 2018-06-29 17:03:09

Original

1394 Leute haben es durchsucht

Dieser Artikel stellt Ihnen 5 Möglichkeiten vor, das Statusobjekt von vuex zu verwenden, und stellt Ihnen die Struktur meines vuex vor. Freunde, die interessiert sind, können dem Editor von Script Home folgen, um gemeinsam zu lernen

vuex Es ist ein Zustandsverwaltungsmodus, der speziell für vue.js entwickelt wurde und auch mit devtools debuggt werden kann.

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 &#39;vue&#39;
import Vuex from &#39;vuex&#39;
import state from &#39;./state&#39;
import actions from &#39;./actions&#39;
import getters from &#39;./getters&#39;
import mutations from &#39;./mutations&#39;
Vue.use(Vuex)
export default new Vuex.Store({
 state,
 actions,
 getters,
 mutations
})

Nach dem Login kopieren

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:&#39;test&#39;,
  data(){
   return{ }
  }
 }
</script>
<style>
</style>

Nach dem Login kopieren

Methode Zwei

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

Nach dem Login kopieren

Methode Drei

<template>
 <p class="test">
  {{count}} <!--步骤三-->
 </p>
</template>
<script type="text/ecmascript-6">
 import {mapState} from &#39;vuex&#39; //步骤一
 export default{
  name:&#39;test&#39;,
  data(){
   return{}
  },
  computed:mapState({     //步骤二,对象方式
   count:state => state.count
  })
 }
</script>
<style>
</style>

Nach dem Login kopieren

Methode 4

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

Nach dem Login kopieren

Methode Fünf

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Bitte achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Einführung in den Prozess der Rekonstruktion mehrseitiger Gerüste basierend auf Vue CLI

Über Vue2 Vue -cli Konfigurationseinführung mit Typescript

Vue implementiert die Komponente der Rückkehr nach oben backToTop

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Statusobjekt von Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!