Итак, мы начали с шаблона в статье Давайте построим приложение vue. Затем мы добавили несколько маршрутов в Давайте направим приложение vue. Теперь нам нужно сохранить некоторые данные в приложении, мы используем vuex для их хранения. Давай проверим.
Сначала нам нужно добавить vuex в наше приложение.
npm install vuex
Круто, но подождем секунду. Государственный магазин, что это такое. В нашем приложении мы помещаем все данные в централизованное хранилище, хранилище может выглядеть как угодно и является просто объектом.
const state = {};
Просто объект
Круто, объект. С его помощью мы можем добавлять данные и получать данные в каждый компонент vue, который мы создаем. И если мы сделаем что-то в одном компоненте, мы можем автоматически получать данные из каждого компонента, который мы используем. Это может быть полезно, и до этого дойдет.
Давайте создадим магазин по-настоящему.
import Vue from 'vue';
import Vuex from 'vuex';
// import people from '@/modules/people/store';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
// people,
},
state: {
count: 0,
},
mutations: {
updateCount(state, payload) {
Vue.set(state, 'count', state.count + payload);
},
},
getters: {
getCount: state => state.count,
},
actions: {
incrementCount(context) {
context.commit('updateCount', 1);
},
decrementCount(context) {
context.commit('updateCount', -1);
},
},
});
Базовый магазин
В магазине у нас есть пара ключевых ценностей.
- государство
- мутации
- добытчики
- действия
Состояние - это тупой объект, о котором мы говорили ранее. Это ваше состояние вашего приложения. Все данные здесь. Мутации - это место, где вы ... мутируете свое состояние. Я люблю вызывать их только по действиям, чтобы все было проще. Действия - это место, которое вы используете в компонентах vue для запуска фактических мутаций. У нас есть несколько геттеров, это место, где ваш компонент получает фактические данные о состоянии.
Итак, в магазине у нас есть два действия: увеличение и уменьшение счетчика. У нас также есть один геттер, получаем счет. Давайте сопоставим их с компонентом.
<template>
<div class="py-3">
<h3>{{ count }}</h3>
<button @click="decrementCount()" class="btn btn-outline-primary">subtract one</button>
<button @click="incrementCount()" class="btn btn-outline-primary">add one</button>
</div>
</template>
<script>
export default {
name: 'the-counter',
computed: {
count() {
return this.$store.getters.getCount;
},
},
methods: {
incrementCount() {
this.$store.dispatch('incrementCount');
},
decrementCount() {
this.$store.dispatch('decrementCount');
},
},
};
</script>
Мы используем computed для получения данных из магазина и некоторые методы для вызова действий в магазине. Они отображаются на кнопках, и у нас есть основная последовательность действий в магазине. В полной мере все это можно увидеть на панели управления. Но это всего лишь число, которое мы видоизменяем, давайте создадим что-нибудь получше.
Модули
Вы читали и в моем примере магазина и видели еще один ключ в магазине, модули. Мне не нравится создавать одно большое хранилище в одном большом приложении, используя миллионы строк JavaScript, чтобы, возможно, иметь большое необслуживаемое состояние. Мне нравится разбивать вещи по «модулям». В моем примере приложения у меня есть сообщения и люди. Начнем с людей, это в некотором смысле простой список, в котором мы можем видеть, создавать и изменять людей. Сначала я получил вопрос.
Почему все папки?
В последнем выпуске Let's vue я написал, что у меня вопрос, почему все папки в вашем приложении. Посмотрим, что я там делал.
src/modules/people/router/ src/modules/people/store/ src/modules/people/views/ src/router/ src/store/ src/views/
Ух ты, такая папка. Теперь мы собираемся разместить некоторые из них в папках с людьми. Я использую папку views в модуле de people для базовых базовых представлений создания, чтения, обновления и удаления (crud). В маршрутизаторе мы маршрутизируем их для этого модуля. А в магазине мы добавляем состояние только для людей. Таким образом, данные о людях находятся в модуле «Люди», и если нам нужны данные о людях, мы знаем, где их искать.
В папку store мы добавляем пару файлов, мне нравится разбивать действия состояний по файлам.
actions.js getters.js index.js mutations.js
Опять известные имена. Отсутствует только одно состояние. Я добавляю его в index.js, чтобы мы могли легко импортировать магазин, позвольте мне показать вам.
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
export default {
namespaced: true,
state: {
items: [
{
id: '8d77b83a-c28e-430f-9177-8b443975d210',
name: 'Charles C. Swain',
phone: '615-233-5488',
function: 'Director of photography',
image: 'static/male.svg',
},
...
],
},
actions,
getters,
mutations,
};
Состояние людей здесь, просто список предметов. В него добавлены действия, геттеры и мутации, теперь я могу просто иметь их в отдельных файлах. Опять же читабельность. Просто держите файлы небольшого размера, чтобы мы могли быстро найти то, что мы можем, хотим и будем делать.
Действия над персональным модулем
В этом примере я просто добавляю тайм-аут ко всем действиям, чтобы имитировать реальный мир. Позже я также добавлю реальный пример.
export default {
addPerson(state, person) {
setTimeout(() => state.commit('personIsAdded', { person }), 500);
},
patchPerson(state, person) {
setTimeout(() => state.commit('personIsPatched', { person }), 500);
},
removePerson(state, personId) {
setTimeout(() => state.commit('personIsRemoved', { personId }), 500);
},
};
Добавить, исправить и удалить. Основные действия отдыха для человека. Допустим, мы используем axios для управления http-вызовами для них, и когда вызов возвращается, он возвращает данные о человеке в формате json, и наше состояние может это использовать.
addPerson(state, person) {
return axios.post(url, { person })
.then((response) => {
state.commit('personIsAdded', { person: response.data });
return result;
})
.catch((error) => {
Promise.reject(new Error('User creation failed '.error.message));
});
},
Это также быстрый пример действия create. Вы также можете использовать обещание return для использования в своем методе для перенаправления после создания. Но объяснить это несколько сложнее.
Мутировать человека
Круто, у нас есть действия. Мы можем сказать, что хотим действовать в соответствии с ними. Давайте обновим состояние в вашем магазине.
import Vue from 'vue';
export default {
personIsAdded(state, payload) {
state.items.push(payload.person);
},
personIsPatched(state, payload) {
const { person } = payload;
const items = state.items.map(item => (item.id === person.id ? person : item));
Vue.set(state, 'items', items);
},
personIsRemoved(state, payload) {
const items = state.items.filter(item => item.id !== payload.personId);
Vue.set(state, 'items', items);
},
};
Добавил, пропатчил, удалил. Готово. Теперь нам нужно вернуть
Получатели состояния
export default {
getItems: state => state.items,
getItem: state => payload => Object.assign({}, state.items.find(item => item.id === payload.id)),
};
Просто получите список или выберите человека из списка. Теперь мы можем сопоставить их с компонентами, которые хотим использовать в приложении. Поскольку у нас есть все действия по управлению состоянием в магазине, в компоненте vue выполняется минимальное количество вызовов. Это сценарий обзора лиц в приложении. Это весь сценарий, который там есть.
export default {
name: 'people',
computed: {
items() {
return this.$store.getters['people/getItems'];
},
},
};
Просто некоторые предметы. Больше нет, но нам нужно больше. Если мы мутируем данные, они будут видоизменены, и vue отобразит здесь состояние при мутации. В этом компоненте я просто визуализирую список людей, ссылающихся на их страницу с подробностями.
<router-link :to="{name: 'people-details', params: { id: item.id }}" v-for="item in items" key="item.id">
{{ item.name }}
</router-link>
Давайте проверим это в Интернете!
Вы можете проверить просмотры модуля Мои люди на github, если хотите прочитать больше кода, или посмотрите пример на моей демонстрационной странице.
В следующий раз пока не знаю. Чтобы не связывать людей с сообщениями. И если у вас есть вопросы или вы хотите, чтобы моя следующая история что-то объясняла, дайте мне знать!
Фото Кларка Янга на Unsplash
