Comment utiliser l'objet d'état de vuex-js tutoriel-php.cn

Comment utiliser l'objet d'état de vuex

不言

Libérer： 2018-06-29 17:03:09

original

1394 Les gens l'ont consulté

Cet article vous présente 5 façons d'utiliser l'objet state de vuex, et vous publie la structure de ma vuex. Les amis intéressés peuvent suivre l'éditeur de Script Home pour apprendre ensemble

vuex It. est un mode de gestion d'état spécialement conçu pour vue.js, et peut également être débogué à l'aide de devtools.

Maintenant, je vais publier la structure de ma vuex pour vous

Ce qui suit est le contenu de state.js et index.js dans le dossier du magasin

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

Copier après la connexion

Commençons par utiliser l'objet d'état vuex dans le composant test.vue

Méthode 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>

Copier après la connexion

Méthode 2

<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>

Copier après la connexion

Méthode 3

<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>

Copier après la connexion

Méthode 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>

Copier après la connexion

Méthode 5

<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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article, je l'espère sera utile pour l'apprentissage de tout le monde Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Introduction au processus de reconstruction d'un échafaudage multipage basé sur vue cli

À propos de Vue2 Vue -cli Introduction à la configuration à l'aide de Typescript

Vue implémente le composant de retour en haut backToTop

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!