Installation und Verwendung des Vue.js-Statusverwaltungsmodus Vuex (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Installation und Verwendung des Vue.js-Statusverwaltungsmodus (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist. .

uex ist ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und stellt mithilfe entsprechender Regeln sicher, dass sich der Status auf vorhersehbare Weise ändert.

Installieren und verwenden Sie vuex

Zuerst installieren wir vuex in der Entwicklungsumgebung vue.js 2.0:

npm install vuex --save

Dann fügen Sie Folgendes hinzu:

import vuex from 'vuex'
Vue.use(vuex);
const store = new vuex.Store({//store对象
    state:{
        show:false,
        count:0
    }
})

zu main.js Dann Fügen Sie das Store-Objekt hinzu, wenn Sie das Vue-Objekt instanziieren:

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<app></app>',
  components: { App }
})

Jetzt können Sie das Statusobjekt über store.state abrufen und Statusänderungen über die Methode store.commit auslösen:

store.commit('increment')

console.log(store.state.count) // -> 1

State

Vuex-Status in Vue-Komponente abrufen

Der einfachste Weg, den Status aus der Store-Instanz zu lesen, besteht darin, einen bestimmten Status in der berechneten Eigenschaft zurückzugeben:

// 创建一个 Counter 组件
const Counter = {
  template: `<p>{{ count }}</p>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState-Hilfsfunktion

Wenn eine Komponente mehrere Zustände erhalten muss, wäre es etwas eintönig und überflüssig, diese Zustände als berechnete Eigenschaften zu deklarieren. Um dieses Problem zu lösen, können wir die Hilfsfunktion „mapState“ verwenden, um berechnete Attribute zu generieren:

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

Wenn der Name des zugeordneten berechneten Attributs mit dem Namen des untergeordneten Knotens des Staates übereinstimmt, Wir können auch ein String-Array an mapState übergeben:

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

Getter

Getter ähneln den in Vue berechneten Zuständen und generieren dann neue Daten (genau wie berechnet). Eigenschaften, der Rückgabewert des Getters wird basierend auf seinen Abhängigkeiten zwischengespeichert und nur dann neu berechnet, wenn sich seine Abhängigkeitswerte ändern.

Getter akzeptiert den Status als erstes Argument:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Zugriff über Eigenschaften

Getter wird als store.getters-Objekt bereitgestellt, und Sie können auf diese Werte als Eigenschaften zugreifen :

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter kann auch andere Getter als zweiten Parameter akzeptieren:

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

In Komponenten verwendet:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

Beachten Sie, dass Getter als Vue verwendet werden, wenn über Eigenschaften darauf zugegriffen wird Teil von Ein reaktives System speichert zwischen.

Zugriff über Methode

Zugriff über Methode

Sie können dem Getter auch Parameter übergeben, indem Sie den Getter eine Funktion zurückgeben lassen. Sehr nützlich, wenn Sie das Array im Speicher abfragen:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Beachten Sie, dass beim Zugriff auf den Getter über eine Methode dieser jedes Mal aufgerufen wird, ohne die Ergebnisse zwischenzuspeichern.

mapGetters-Hilfsfunktion

Die MapGetters-Hilfsfunktion ordnet die Getter im Speicher lediglich lokal berechneten Eigenschaften zu:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Wenn Sie einem Getter-Attribut einen anderen Namen geben möchten, verwenden Sie Objektform:

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Mutation

Die einzige Möglichkeit, den Status im Vuex-Store zu ändern, besteht darin, eine Mutation einzureichen.

Registrierung:

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

Aufruf:

store.commit('increment')

Nutzlast senden

Sie können zusätzliche Parameter an store.commit übergeben, also Mutation Nutzlast:

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

Wenn mehrere Parameter übermittelt werden, müssen sie in Form von Objekten übermittelt werden

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

Hinweis: Die Operationen in Mutationen müssen synchron sein

Aktion

Aktion ähnelt Mutation, außer dass:

• Aktion übermittelt eine Mutation, anstatt den Zustand direkt zu ändern.

• Aktion kann jede asynchrone Operation enthalten.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Aktion wird durch die Methode store.dispatch ausgelöst:

store.dispatch('increment')

Führt einen asynchronen Vorgang innerhalb der Aktion durch:

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Übergeben Sie Parameter in Objektform :

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

Verwandte Empfehlungen:

Vue.js's Vuex (Zustandsverwaltung)

So verwenden Sie die Vuex-Zustandsverwaltung

Über die Familien-Bucket-Statusverwaltung von Vuex

Das obige ist der detaillierte Inhalt vonInstallation und Verwendung des Vue.js-Statusverwaltungsmodus Vuex (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!