So verwenden Sie Vuex State und MapState

Dieses Mal zeige ich Ihnen, wie Sie Vuex State und MapState verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vuex State und MapState gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Verwenden Sie zuerst Vue CLI, um Ihr eigenes Vue-Projekt zu erstellen

1.npm i -g vue-cli
2.vue init webpack sale (verkaufen Sie Projektname)
3. Geben Sie den ganzen Weg ein (während dieses Vorgangs werden Sie gefragt, ob Sie einige abhängige Pakete installieren möchten, z. B. Vue-Router, ES6-Grammatikprüfung usw., wählen Sie J/N basierend auf Ihren persönlichen Gewohnheiten oder Hobbys)
4.npm i (dies ist das Abhängigkeitspaket für die Installation des Projekts)
5.npm run dev (starten Sie Ihr Vue-Projekt) Wenn Sie zu diesem Zeitpunkt das Vue-Logo auf der Seite sehen, bedeutet dies Sobald die Grundlage für Ihr Vue-Projekt erstellt wurde, können Sie die nutzlosen Komponenten löschen.
6 Webpack Sell installiert Vuex nicht standardmäßig, daher müssen Sie Vuex zweimal in der Befehlszeile installieren Beenden Sie den Server, npm install vuex –save, um vuex zu installieren.
7. Erstellen Sie eine neue Vue-Komponente in Ihrem src-Verzeichnis (Sie können sie nach Belieben benennen, seien Sie einfach glücklich). Wird als Hauptcontainer verwendet und zeigt nur Inhalte an.
8. Erstellen Sie dann eine neue Komponente. Rufen Sie die Komponente auf, wie Sie möchten (ich nenne sie hier die Komponente Anzeige), um den Status im Status 9. Als nächstes erstellen wir einen neuen Ordner namens „store“ im src-Verzeichnis und einen neuen Ordner unter dem Store. Eine js-Datei namens „test.js“ (der Store hier ist unser Front-End-Data Warehouse) verwendet vuex für die Statusverwaltung .Store ist der Kern von vuex und heißt daher eine neue Store-Datei im src-Verzeichnis und eine neue test-Datei im Store-Verzeichnis (unten). Sie können sehen, dass Sie Vue vor der Verwendung von Vuex anweisen müssen, es zu verwenden: Vue.use(Vuex); 🎜>, Zustand Es gibt nur eine Zählung unten und diese wird auf 0 initialisiert.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
 count: 0
 }
export default store

Jetzt werden alle Zustände, also Variablen, in test.js platziert. Wie kann unsere Komponente also den Zustandsänderungswert erhalten? Hier sind zwei Schritte erforderlich 1. Vue stellt einen Injektionsmechanismus bereit, der darin besteht, unser Speicherobjekt in die Stamminstanz zu injizieren. Die Stamminstanz von vue ist der neue Vue-Konstruktor, und dann zeigt this.$store in allen Unterkomponenten auf das Store-Objekt. In test.js exportieren wir den Store und der Store wurde in main.js verfügbar gemacht, sodass wir den Store direkt in main.js einführen und einfügen können.

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

2. Verwenden Sie in untergeordneten Komponenten das berechnete Attribut. Das berechnete Attribut wird basierend auf seinen Abhängigkeiten automatisch aktualisiert. Solange sich also der Zustand im Geschäft ändert, ändert er sich automatisch. Nehmen Sie die folgenden Änderungen in display.vue vor. This.$store in der Unterkomponente verweist auf das Store-Objekt. Wir ändern die Anzahl in test.js auf 8 und es wird 8 auf der Seite.

<template>
 <p>
  <h3>Count is {{count}}</h3>
 </p>
</template>
<script>
 export default {
  computed: {
   count () {
    return this.$store.state.count 
   }
  }
 }
</script>

3. Der Statuswert kann über das berechnete Attribut abgerufen werden, aber jedes Attribut (z. B. count) in der Komponente ist eine Funktion. Wenn es 10 gibt, müssen 10 Funktionen geschrieben werden, und zwar 10 wiederholt geschrieben. Es ist nicht sehr praktisch, this.$store.state ständig zurückzugeben. Vue stellt die Funktion „mapState“ bereit, die den Zustand direkt unseren Komponenten zuordnet.

Natürlich müssen Sie mapState vorstellen, bevor Sie es verwenden können. Es kann auf zwei Arten verwendet werden, indem es entweder ein Objekt oder ein Array akzeptiert. Immer noch unter der display.vue-Komponente.

Die Objektverwendung ist wie folgt:

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

Die Array-Methode lautet wie folgt:

<script>
 import {mapState} from "vuex";
 export default {
  computed: mapState([ // 数组
   "count"
  ])
 }
</script>

4. Es gibt noch eine letzte Frage: Was wäre, wenn wir auch berechnete Eigenschaften darin hätten? unsere Komponenten? Es gehört nicht in MapState. Dann verwenden wir die Objektsegmentierung, um die von der MapState-Funktion generierten Objekte einzeln aufzuteilen. Genau wie am Anfang haben wir die berechneten Attribute einzeln aufgelistet. Wenn es 10 Attribute gibt, schreiben wir 10 Funktionen.

... wird in es6 zum Teilen verwendet, kann aber nur Arrays teilen. Es kann Objekte in ECMAScript Stage-3 aufteilen, daher wird zu diesem Zeitpunkt auch babel-stage-3 verwendet. Vergessen Sie nicht, npm install babel-preset-stage-3 --save-dev hinzuzufügen babel in babelrc Schreiben Sie in die

Konfigurationsdatei

stage-3,

, andernfalls wird immer ein Fehler gemeldet. Fügen Sie der Seite ein p-Tag hinzu, um die Vertrautheit unserer Komponente mit der Berechnung anzuzeigen

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"]
 }
 }
}

Nachdem die display.vue-Komponente geändert wurde,

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

put test. Ändern Sie state.count in js auf 10 und sehen Sie einen Effekt

Werfen wir einen Blick auf die Verwendung von mapState in 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
  }

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

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

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

推荐阅读：

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

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

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