Как использовать Векс
1. Краткое введение в Vuex
Vuex — это инструмент управления состоянием. Так называемое состояние — это данные, и некоторые данные управляются с помощью этого инструмента. Когда нескольким компонентам нужны одни и те же данные, эти данные могут быть переданы Vuex для унифицированного управления, и компоненты могут напрямую ссылаться на эти данные, избегая утомительной послойной передачи между компонентами.
2. Ядро Vuex
Vuex имеет пять ядер: состояние, геттер, мутацию, действие и модуль. Состояние используется для хранения управляемых данных, геттер эквивалентен вычисляемому свойству, мутация используется для определения метода изменения данных в состоянии, действие используется для определения некоторых асинхронных методов, а модуль можно разделить несколько магазинов на один за другим. модуль.
3. Использование Vuex
3.1 При использовании Vuex в проекте Vue необходимо сначала установить подключаемый модуль Vuex и зарегистрировать его. В общем, будет. Создайте новую папку хранилища в src с index.vue ниже и создайте экземпляр контейнера хранилища в этом файле.
// 1.
Install the pluginnpm install vuex --save // 2.
Register pluginimport Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
3.2 Создайте экземпляр vuex, укажите метод Store()
в vuex для создания экземпляра и назовите его store, что означает склад. Передайте объект конфигурации в Vuex.Store()
. Объект конфигурации включает в себя указанные выше пять ядер. Если он не используется, его можно опустить.
const store = new Vuex.Store({ state: {num: 2}, //
store datagetters: {}, //
computed propertymutations: {}, //
Some methods of modifying data in stateactions: {}, //
async methodmodules: {} //
store module}) export default store
3.3 Добавьте store в файл записи main.js.
// main.js import Vue from 'vue' import App from './App' import store from './store/index.vue' //
Shorthand import store from './store'Vue.config.productionTip = false new Vue({ el: '#app', store: store, //
es6 shorthand directly write the store property name is the same as the variable namerender: h => h(App) })
3.4 Как использовать данные в магазине на странице? Прежде чем использовать данные в vuex, используйте import
для импорта записанного хранилища. В компоненте используйте $store.state.num
в выражении интерполяции, чтобы получить данные num в хранилище.
<template>
<div>
<h2>{{ $store.state.num }}</h2>
</div>
</template>
4. mapState, mapMutations, mapGetters, сопоставление mapActions
1. //
First deconstruct four methods from vueximport {mapState, mapMutations, mapGetters, mapActions} from 'vuex' 2. //
Map state data and getters computed properties in computed computed propertiescomputed: { ...mapState('
module name', ['name', 'age']) ...mapGetters('
module name', ['getName']) } 3. //
Mapping mutations and actions methods in methods methodmethods: { ...mapMutations('
module name', ['
method name1','
method name2']) ...mapActions('
module name', ['
method name1','
method name2']) } 4.
These data and methods can be called and obtained through this
Выше приведено общее использование vuex. Спасибо.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn и Discord.