Résumé de la façon d'utiliser l'objet d'état de vuex-js tutoriel-php.cn

Résumé de la façon d'utiliser l'objet d'état de vuex

php中世界最好的语言

Libérer： 2018-06-07 11:42:12

original

1546 Les gens l'ont consulté

Cette fois, je vais vous apporter un résumé de la façon d'utiliser l'objet state de vuex Quelles sont les précautions d'utilisation de l'objet state de vuex Voici un cas pratique, jetons un oeil.

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

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

Copier après la connexion

Deuxième méthode

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

Copier après la connexion

Méthode trois

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

Copier après la connexion

Méthode quatre

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

Copier après la connexion

Méthode cinq

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez des classes dans ES6 pour imiter Vue afin d'effectuer une liaison bidirectionnelle

Comment utiliser Vue pour le transfert de données

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!