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

Vue - это прогрессивный фреймворк Javascript, а Vuex - инструмент управления состоянием. Мы можем использовать redux или flux внутри Vue, но Vuex является родным для Vue. Здесь я демонстрирую пример приложения, которое может не понадобиться с Vuex, но оно покажет базовое понимание концепций Vuex.

Почему именно Vuex ??

Видео достаточно, чтобы понять все концепции о том, зачем нам Vuex. Благодаря Греггу и Адаму из Vue Mastery, предоставьте визуальное объяснение потребностей Vue и Vuex.

"ссылка"

Вступление

Цель этого блога - создать приложение с одним счетчиком, которое будет отображать количество нажатий кнопок. Я знаю, что для Vuex в этом нет необходимости, но здесь мы показываем это в информационных целях. Опубликуйте ссылку на GitHub ниже.

СОДЕРЖАНИЕ

  1. Установить Vue
  2. Создать приложение Vue с помощью интерфейса командной строки
  3. Установите Vuex в приложение
  4. Добавить компонент для счетчика
  5. Свяжите Vuex с приложением
  6. Создайте государство
  7. Создайте мутации
  8. Создать Действия.
  9. Создать геттеры
  10. Вызов геттеров, действия из компонента.
  11. Подведение итогов

1.Установите Vue.

Узел является обязательным при установке Vue из CLI. У нее много плюсов вместо CDN-версии.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2. Создайте приложение Vue с помощью интерфейса командной строки.

Это можно сделать с помощью следующей команды:

vue create application-name
ex: vue create vuex-demo

Команда запросит линтинг, настройку теста и т. Д., И все это будет рассмотрено в другом блоге.

После создания необходимо изменить каталог и запустить сервер разработки с помощью следующих команд.

cd application-name
npm run serve

Теперь сервер работает на порту 8080, и у нас также есть отличная целевая страница.

Он показывает, какие плагины установлены, а какие нужно установить.

Тем не менее, мы не установили Vuex, сделаем это сейчас.

3. Установите Vuex в приложение.

Мы следим за этой страницей. установите Vuex с помощью этой команды

npm install vuex --save

Теперь нам нужно связать Vuex с приложением Vue. Это можно сделать, добавив «Импорт» в main.js

Текущий файл main.js

import Vuex from 'vuex'
Vue.use(Vuex)

Конечный main.js становится,

4. Добавьте компонент для счетчика

Vue CLI уже создал для нас компонент под названием «HelloWorld.vue», но мы его не используем. Вместо этого мы создаем компонент счетчика с именем Counter.vue.

Удалите HelloWorld.vue, а также его зависимости (удалите из App.vue)

  1. Создайте компонент под названием Counter.vue
  2. Зарегистрируйте этот компонент в App.vue в разделе компонентов.
  3. Вызовите counter.vue из шаблона

1. Создайте компонент под названием Counter.vue.

<template>
  <div>
    <h2>Welcome to Counter</h2>
    <button>increment counter</button>
  </div>
</template>
<script>
</script>
<style>
</style>

2. Зарегистрируйте этот компонент в App.vue в разделе компонентов.

Для этого необходимо также импортировать и добавлять компоненты.

import Counter from './components/Counter.vue'
export default {
  name: 'app',
  components: {
    Counter
  }
}

3. Вызовите counter.vue из шаблона.

Это делается добавлением «‹ Счетчик / ›» в раздел шаблона.

Теперь App.vue становится таким:

и пользовательский интерфейс становится,

5. Свяжите Vuex с приложением.

Теперь самая важная часть - это создание файла магазина

«Есть так много способов реализовать это, но я следую за папкой магазина внутри этого внешнего файла магазина»

Я создал папку store внутри src, а затем создал внутри нее файл index.js.

В этом файле index.js необходимо импортировать Vue и Vuex.

Затем свяжите магазин с файлом main.js.

Импортируйте файл магазина в main.js

import { store } from './store'

Добавьте магазин в «app.vue»

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store()

Окончательный код становится,

проверьте сервер на наличие ошибок,

Мы хороши.

6. Создайте состояние

Теперь мы можем создать состояние с именем count, в котором будет сохраняться текущее состояние значения счетчика. Первоначально мы устанавливаем его равным нулю, а затем, используя мутацию, изменим состояние.

export const store = new Vuex.Store({
state: {
    count: 0
  }
})

7. Создайте мутации.

Все изменения состояния будут происходить через мутации. Это можно реализовать с помощью ключевого слова «mutations». Здесь следует отметить, что мутации могут иметь 2 параметра, один - «состояние», то есть текущее состояние, и полезная нагрузка, которая является значением, которое необходимо использовать для изменения состояния. В этом контексте будет увеличиваться значение счетчика.

mutations: {
  incrementCounter(state, payload) {
    state.count += payload
  }
}

8. Создайте действия.

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

Мы можем написать двумя способами

actions: {
    inrementAction (context, payload) {
      context.commit('incrementCounter', payload)
    }
  }

or

actions: {
    inrementAction ({commit}, payload) {
      commit('incrementCounter', payload)
    }
  }

9. Создайте геттеры

Из вышесказанного мы поняли мутации, действия. Теперь вопрос в том, как мы можем отобразить текущее состояние в шаблоне. Это можно сделать с помощью геттеров. У геттеров будут аргументы, называемые состоянием.

getters: {
    counter (state) {
      return state.count
    }
  }

10. Вызов геттеров, действия из компонента.

Теперь нам нужно сделать следующие вещи.

  1. Увеличивайте счетчик при нажатии на кнопку.
  2. Отображение обновленного значения счетчика на дисплее

1. Увеличивайте счетчик при нажатии на кнопку.

Для этого будет создан метод, который, в свою очередь, вызовет действие для увеличения счетчика. В компоненте Counter добавим для этого метод,

<button @click="incrementCounter">increment counter</button>

Метод в разделе шаблона вызовет метод, который, в свою очередь, вызовет хранилище для обновления.

methods: {
      incrementCounter () {
        this.$store.dispatch('inrementAction', 1)
      }
    }

Это будет incrementAction (), обновит счетчик

2. отобразить обновленное значение счетчика на дисплее.

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

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

Теперь в разделе шаблонов нужно просто интерполировать это значение.

{{counter}}

Теперь, щелкнув счетчик приращения, обновит значение.

11. Заключение

Я знаю, что это совсем немного, скоро обновлю расширенные компоненты Vuex в следующем блоге. Пожалуйста, установите vue-js-devtools для проверки состояния Vuex и отладки. ниже находится ссылка на GitHub для этой базы кода приложения.

Если эта история поможет вам узнать что-нибудь, пожалуйста, купи мне кофе.

Ссылка на GitHub

Прокомментируйте или похлопайте, если вам это нравится.