Как использовать Векс

1. Краткое введение в Vuex

Vuex — это инструмент управления состоянием. Так называемое состояние — это данные, и некоторые данные управляются с помощью этого инструмента. Когда нескольким компонентам нужны одни и те же данные, эти данные могут быть переданы Vuex для унифицированного управления, и компоненты могут напрямую ссылаться на эти данные, избегая утомительной послойной передачи между компонентами.

2. Ядро Vuex

Vuex имеет пять ядер: состояние, геттер, мутацию, действие и модуль. Состояние используется для хранения управляемых данных, геттер эквивалентен вычисляемому свойству, мутация используется для определения метода изменения данных в состоянии, действие используется для определения некоторых асинхронных методов, а модуль можно разделить несколько магазинов на один за другим. модуль.

3. Использование Vuex

3.1 При использовании Vuex в проекте Vue необходимо сначала установить подключаемый модуль Vuex и зарегистрировать его. В общем, будет. Создайте новую папку хранилища в src с index.vue ниже и создайте экземпляр контейнера хранилища в этом файле.

// 1. Install the plugin
npm install vuex --save
// 2. Register plugin
import 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 data
    getters: {}, // computed property
    mutations: {}, // Some methods of modifying data in state
    actions: {}, // async method
    modules: {} // 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 name
   render: 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 vuex 
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
2. // Map state data and getters computed properties in computed computed properties
computed: {
    ...mapState('module name', ['name', 'age'])
    ...mapGetters('module name', ['getName'])
}
3. // Mapping mutations and actions methods in methods method
methods: {
    ...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.