Серия Vue от милого маленького белого до кожи большого парня (8) Vuex

🎉 Vue создает крупномасштабные одностраничные приложения для электронной коммерции с открытым исходным кодом!Нажмите на меня, чтобы увидеть исходный код 🚀🚀

阅读时间预计8分钟,读完本文你将收获如下知识点,记得点赞👍哦~

1. Что такое Vuex?

Vuex используется для управления всеми состояниями компонентов Vue, что является продвинутым способом взаимодействия между компонентами.

Официальная документация VuexЭто было объяснено очень подробно, и рекомендуется прочитать его полностью.Эта статья является моим собственным резюме обучения, практикой и введением, а некоторые концепции и утверждения заимствованы у официального.

2. Зачем использовать Vuex?

в предыдущих статьяхкомпонент связиМы говорили об общих методах связи в компонентах:props,$emit/v-on,$parent / $children & $refsЭти три, их ограничение состоит в том, что они могут взаимодействовать только в компонентах родитель-потомок, а не в компонентах-братах, а два другихBus中央总线,发布订阅模式Связь между любыми компонентами возможна, но если в больших проектах неизбежно будут какие-то узкие места и связь между компонентами высока, тоVuexПросто оказалось, что он может разумно управлять состоянием в каждом компоненте (связь, реализация захвата методов, передача данных), отделять состояние от компонента, определять и изолировать различные концепции в управлении состоянием и применять правила. сделает наш код более структурированным и удобным в сопровождении.

3. Ядро Vuex

Vuexпредоставить синглтонStoreОн эквивалентен контейнеру, содержащемуstateДля общедоступных данных мы передаем синглтонStoreЧтобы единообразно управлять ими динамически в соответствии с установленными правиламиstate,ЭтоVuexОсновной.

1.`State`

state — это чистый объект с некоторыми монтированиями состояния, и приложение должно иметь только одинstateсуществуетstore.jsсередина

export default new Vuex.Store({
 state : {//初始状态
    name：'极客James', 
    height：180,
    age:27
  } 
})

1.1`mapState`:

Используйте вспомогательную функцию mapState, чтобы помочь нам сгенерировать вычисляемые свойства, которые передаются компонентам, которым необходимо обмениваться данными.import {mapState} from 'vuex'Ввести вспомогательные функции, а затем нужно вычислить свойстваcomputedДанные отображаются в хуке.

`mapState`Существует три способа использования вспомогательных функций:

Первый: вычисляемые свойства возвращают значения через стрелочные функции

computed:mapStates({
    name:state=>state.name,
    height:state=>state.name,
    age:state=>state.age
})

Второй способ: воспользоваться преимуществами... расширяемости ES6 (рекомендуемая практика)

computed:{
    ...mapState([
        'name',
        'height',
        'age'
    ])
}

Третий способ: использовать функцию расширения ES6... для получения значений через объекты

computed:{
    ...mapState({
        name:state=>state.name,
        height:state=>state.height,
        age:state=>state.age
    })
}

Получить данные из компонента

<template>
  <div class="app">
    <div>我是store里面的数据姓名:{{name}}</div>
    <div>我是store里面的数据年龄:{{age}}</div>
    <div>我是store里面的数据身高:{{height}}</div>
  </div>
</template>

Выходной результат:

2.`Getter`

можно считатьstoreВычисляемые свойства, такие как вычисляемые свойства,getterвозвращаемое значение кэшируется в соответствии с его зависимостями и пересчитывается только при изменении его зависимостей.

2.1`mapGetter`

mapGetterвспомогательная функция геттера, использующая методы иmapStateТочно так же рекомендуется использовать расширение... для получения значения.

3.`Mutation`

Мутации в Vuex очень похожи на события: каждая мутация имеет строковый тип события (тип) и функцию обратного вызова (обработчик). Эта функция обратного вызова — это место, где мы фактически изменяем состояние, и оно будет принимать состояние в качестве первого параметра, что является единственным способом синхронного изменения состояния.

В компоненте через метод событияСинхронизированные измененияstoreсерединаstate, нужно пройтиcommitОтправить, чтобы ответитьmutationметод события в .

methods: {
add () {
  Store.commit('increment', { number: 10 });
},
reduce () {
  Store.commit('reduce');
}
}

Другой способ написания: подчинение в объектном стиле

Рекомендуется использовать константы вместо типов событий Mutation.

Помните, о чем мы говорили в компонентной коммуникации发布订阅метод межкомпонентной связи, использующий константы для определения типов событий?VuexТакже настоятельно рекомендуется использовать этот метод вmutationКонсолидация констант событий в одной папкеmutation-type.jsв, черезexportспособ экспорта.

существуетmutation-type.js

export const ADD = 'ADD'
export const REDUCE = 'REDUCE'

существуетstore.jsвведен вimport {ADD,REDUCE} from './mutation-type.js'

import {ADD,REDUCE} from './mutation-type.js'
mutation:{
    [ADD](state,payload) {
        state.age += payload.number;
    },
    [REDUCE](state,payload) {
        state.age --;
    }
}

То же вводится в обязательные компонентыimport {ADD,REDUCE} from './mutation-type.js'

3.1 `mapMutation`

mapMutationдаmutationвспомогательная функция иstateАналогичное можно сделать напрямую через операцию ... раскрытия.

4.`Action`

Представленное действиеmutation, а не изменять состояние напрямую.
Действие может содержать произвольные асинхронные операции.

Зарегистрируйтесь на простойAction, и передавать значения извне.

Пропуск действияstore.dispatchТриггер метода в компоненте Vue:

Другой способ записи: деструктуризация параметров

add({commit}) {
    commit('add');
}

4.1 mapAction

mapActionдаactionВспомогательной функцией удобно вызывать события в экшене в компоненте Vue. В компонентах Vue деструктурирование может быть выполнено с помощьюmapActionпуть будет карта

 methods: {
     ...mapActions([
      'add',
      "reduce"
    ])
}

Обратите внимание на этот раз: используйтеmapActionoПосле того, как метод сопоставления должен передать параметры, его нужно написать в том месте, где срабатывает событие.

<button @click="add({number:10})">增加年龄</button>

4.2 Объединение действий

Объединение действий на самом деле является асинхронной обработкой нескольких действий.commitсобытия, которые могут быть взаимно мобилизованыaction, с помощьюPromiseОн обеспечивает стабильность и порядок состояния данных.

Официальный пример:

существуетstore.jsсередина

В компоненте Vue:

store.dispatch('actionA').then(() => {
 
})

События могут быть отправлены асинхронно в другом действии:

actions: {
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

Рекомендуемое чтение:

MDN Promise

async / await

5.`Module`

Когда приложение становится очень сложным, объект хранилища может сильно раздуться.Чтобы решить эту проблему, мы можем использоватьstoreПять состояний в разделе разделены на единую модель, а затем представлены через запись.Как правило, при разработке проекта вsrcсоздать каталогstoreкаталог, а затем создайте следующие файлы

существуетindex.jsВсе файлы вводятся и монтируются в экземпляре Vuex единообразно.

существуетmain.jsвведен вindex.jsи смонтировать его на экземпляре Vue

Общая структура проекта:

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 根级别的 state
    ├── actions.js        # 根级别的 action
    ├── getter.js         # 根级别的 getter
    ├── mutations.js      # 根级别的 mutation
    ├── mutations-type.js # mutation事件常数名
    └── modules
        ├── a.js       # a模块
        └── b.js       # b模块
        └── ...

Проведите по QR-коду ниже, ответьтеУчитьВы можете получить новейшие учебные материалы по интерфейсу бесплатно, и я надеюсь, что мы будем расти и продвигаться вместе на пути к продвинутому интерфейсу!

1. Что такое Vuex?

2. Зачем использовать Vuex?

3. Ядро Vuex

1.State

1.1mapState:

mapStateСуществует три способа использования вспомогательных функций:

2.Getter

2.1mapGetter

3.Mutation

3.1 mapMutation

4.Action