Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser l'état vuex et mapState

php中世界最好的语言
Libérer: 2018-06-02 15:51:22
original
1600 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser vuex state et mapState, et quelles sont les précautions pour utiliser vuex state et mapState. Ce qui suit est un cas pratique, jetons un coup d'œil.

Utilisez d'abord vue cli pour créer votre propre projet vue

1.npm i -g vue-cli
2.vue init webpack sell (sell, c'est vous Nom du projet)
3. Entrez jusqu'au bout (au cours de ce processus, il vous sera demandé si vous souhaitez installer certains packages dépendants, tels que vue-router, la vérification grammaticale es6, etc., sélectionnez O/N en fonction de vos habitudes personnelles ou loisirs)
4.npm i (c'est le package de dépendances pour installer le projet)
5.npm run dev (démarrez votre projet vue) À ce moment, si vous voyez le logo vue sur la page, cela signifie que la base de votre projet vue a été construite et terminée, vous pouvez alors supprimer les composants inutiles
6. Webpack sell n'installe pas vuex par défaut, vous devez donc appuyer deux fois sur ctrl+c sur la ligne de commande ; terminez le serveur, npm install vuex –save pour installer vuex.
7. Créez un nouveau composant vue dans votre répertoire src (vous pouvez le nommer comme vous le souhaitez, soyez simplement heureux). utilisé comme conteneur principal et affiche uniquement le contenu
8. Ensuite, créez-en un nouveau. Appelez le composant comme vous voulez (je l'appellerai le composant affichage ici) pour accepter l'état dans l'état <.>9. Ensuite, nous créons un nouveau dossier appelé store dans le répertoire src, et créons un nouveau dossier sous le magasin. Un fichier js appelé test.js (le magasin ici est notre entrepôt de données front-end) utilise vuex pour la gestion de l'état. . Store est le cœur de vuex, il s'appelle donc store. Créez un nouveau fichier store dans le répertoire src et créez un nouveau test dans le fichier js (ci-dessous). Vous pouvez voir qu'avant d'utiliser vuex, vous devez dire à vue de l'utiliser, Vue.use(Vuex); Nous n'avons qu'un seul nombre de variables à gérer ici, donc lors de la création de l'objet store, transmettez les paramètres au constructeur
, state Il n'y a qu'un seul décompte ci-dessous, et il est initialisé à 0.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
 count: 0
 }
export default store
Copier après la connexion
Maintenant, tous les états, c'est-à-dire les variables, sont placés dans test.js, alors comment notre composant peut-il obtenir la valeur de modification de l'état ? Il y a deux étapes à opérer ici

1. Vue fournit un mécanisme d'injection, qui consiste à injecter notre objet store dans l'instance racine. L'instance racine de vue est le nouveau constructeur Vue, et dans tous les sous-composants, this.$store pointe vers l'objet store. Dans test.js, nous exportons le magasin et le magasin a été exposé. Le nouveau Vue() est dans main.js, nous pouvons donc introduire directement le magasin dans main.js et l'injecter.

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/test'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})
Copier après la connexion
2. Dans les composants enfants, utilisez l'attribut calculé. L'attribut calculé est automatiquement mis à jour en fonction de ses dépendances. Ainsi, tant que l'état dans le magasin change, il changera automatiquement. Apportez les modifications suivantes dans display.vue. This.$store dans le sous-composant pointe vers l'objet store. Nous modifions le nombre dans test.js à 8, et il devient 8 sur la page.

<template>
 <p>
  <h3>Count is {{count}}</h3>
 </p>
</template>
<script>
 export default {
  computed: {
   count () {
    return this.$store.state.count 
   }
  }
 }
</script>
Copier après la connexion
3. La valeur d'état peut être obtenue via l'attribut calculé, mais chaque attribut (tel que le nombre) dans le composant est une fonction s'il y en a 10, alors 10 fonctions doivent être écrites, et. répété Il n'est pas très pratique d'écrire return this.$store.state 10 fois. Vue fournit la fonction mapState, qui mappe l'état directement à nos composants.

Bien sûr, vous devez introduire mapState avant de l'utiliser. Il peut être utilisé de deux manières, soit en acceptant un objet, soit en acceptant un tableau. Toujours sous le composant display.vue.

L'utilisation de l'objet est la suivante :

<script>
 import {mapState} from "vuex"; // 引入mapState 
 export default {
      // 下面这两种写法都可以
  computed: mapState({
   count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁  
   count: 'count'         // 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
  })
 }
</script>
Copier après la connexion
La méthode du tableau est la suivante :

<script>
 import {mapState} from "vuex";
 export default {
  computed: mapState([ // 数组
   "count"
  ])
 }
</script>
Copier après la connexion
4, Il y a une dernière question, et si nous aussi avez-vous calculé des attributs à l'intérieur de nos composants ? Il n'appartient pas à mapState. Ensuite, nous utilisons la segmentation d'objets pour diviser les objets générés par la fonction mapState en un par un. Tout comme au début, nous avons répertorié les attributs calculés un par un. S'il y a 10 attributs, nous écrirons 10 fonctions.

... dans es6 est utilisé pour le fractionnement, mais il ne peut diviser que les tableaux. Il peut diviser des objets dans ECMAScript stage-3, donc babel-stage-3 est également utilisé à ce moment-là ; npm install babel-preset-stage-3 --save-dev Une fois l'installation terminée, n'oubliez pas d'ajouter. babel dans babelrc Dans le

fichier de configuration , écrivez stage-3,

sinon une erreur sera toujours signalée. Ajoutez une balise p à la page pour afficher la familiarité de calcul de notre composant

babelrc

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-3"
 ],
 "plugins": ["transform-runtime"],
 "env": {
 "test": {
  "presets": ["env", "stage-3"],
  "plugins": ["istanbul"]
 }
 }
}
Copier après la connexion
composant display.vue après modifications

<template>
 <p>
  <h3>Count is {{count}}</h3>
  <p>组件自己的内部计算属性 {{ localComputed }}</p>
 </p>
</template>
<script>
 import {mapState} from "vuex";
 export default {
  computed: {
   localComputed () {
    return this.count + 10;
   },
   ...mapState({
    count: "count"
   })
  } 
 }
</script>
Copier après la connexion
Changez state.count dans test.js en 10 et voyez l'effet

Jetons un coup d'œil à l'utilisation de mapState dans Vuex

今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了。真是天雷滚滚~~~~~~

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex)
const state = {
 userInfo: { phone: 111 }, //用户信息
 orderList: [{ orderno: '1111' }], //订单列表
 orderDetail: null, //订单产品详情
 login: false, //是否登录
}
export default new Vuex.Store({
 state,
 getters,
 actions,
 mutations,
})
computed: {
   ...mapState([
    'orderList',
    'login'
   ]),
  }, 
  mounted(){ 
   console.log(typeof orderList); ==>undefind
   console.log(typeof this.orderList)==>object
  }
Copier après la connexion

mapState通过扩展运算符将store.state.orderList 映射this.orderList  这个this 很重要,这个映射直接映射到当前Vue的this对象上。

所以通过this都能将这些对象点出来,同理,mapActions, mapMutations都是一样的道理。牢记~~~

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用Vue实现倒计时按钮

怎样利用Vue写一个双向数据绑定

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!