Как использовать vuex для лучшей организации кода для сложных интерактивных проектов

внешний интерфейс Vuex

"Это 24-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления"

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

В последний год или около того я работал над проектом онлайн-редактирования видео, который основан на vue2.x. Самая сложная страница в проекте — это страница редактирования, которая выглядит так (найдите похожий интерфейс):

image.png

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

Так как же будет организован код vuex для такого сложного проекта? Вот мой рекомендуемый метод:

Во-первых, в проекте будет много модулей (или страниц), мое предложение:Разделить магазин по модулям бизнес-логики, одному бизнес-модулю соответствуетmodule

Здесь следует отметить следующее:

  1. Не помещайте все бизнес-модули в один магазин, чтобы его было непросто поддерживать после повышения статуса проекта.
  2. Бизнес-модуль не должен соответствовать нескольким модулям vuex, даже если он сложный.

Совершить ошибку (можно пропустить)

Я наступил на эти две ямы.Когда я только начал работать над проектом, проект был относительно небольшим и очень простым, и страница редактирования была не такой сложной, как сейчас. должны быть сохранены информация о пользователе и страница редактирования.Статус, не так много, я просто собрал его. Код такой, все состояния в магазине

export const store = new Vuex.Store({
    state: {
        userInfo:{
            id:'',
            token:'',
            phone:''
        },
        materials:[],
        audio:[],
        task:[]
    },
    mutations: {},
    modules: {},
})

После этого код какое-то время работает стабильно. Позже в продукт были добавлены функции, поддерживающие несколько видеосцен, поддерживающие фоны, поддерживающие фильтры, регулировку разрешения, анимацию материалов и другие беспорядочные функции.Есть еще много состояний, которые необходимо сохранить.Соедините их все вместе, и файл хранилища будет слишком Он вырос до более чем тысячи строк. В этом случае я чувствовал, что состояние и файл хранилища будет становиться все сложнее поддерживать, поэтому я провел рефакторинг кода, а затем совершил вторую ошибку:

Я разделил статус страницы редактирования на несколько модулей, что выглядит так

const user={
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const material = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const audio = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}
//...其他模块

const store = new Vuex.Store({
  modules: {
    user:user,
    material: material,
    audio: audio,
    //其他模块
  }
})

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

окончательный план результата

Окончательное решение:Отдельный бизнес-модуль соответствует модулю магазина

Бизнес-модули, задействованные в моем проекте: пользовательский модуль, модуль редактирования, модуль управления, модуль инструментария, если у каждого модуля есть состояние, которое необходимо сохранить, у вас может быть 4 модуля.

const store = new Vuex.Store({
  modules: {
    user,
    edit,
    manage,
    toolkit
  }
})

Каждый модуль соответствует файлу или папке, а некоторые модули имеют относительно простое состояние, например пользователь, создать новыйuser.jsСостояние файлового хранилища достаточно.Для сложных модулей, типа редактирования, нужно создать папку.

Каталог выглядит следующим образом:

vuex-demo/store
├── index.js
└── module
    ├── edit
    │   ├── audio.js
    │   ├── component.js
    │   ├── edit-mutations.js
    │   ├── edit.js
    │   └── material.js
    └── user.js

Сделайте его папкой (вместо файла), чтобы не писать все состояние вedit.jsВ предотвращении файла слишком велик. Edit.js Используйте в расширении алгоритмов и сделали дополнительный модульный код, код выглядит следующим образом:

edit.jsкод показывает, как показано ниже:

import { audio } from './audio'
import {material} from './material'

export const edit = {
    state: () => ({
        ...audio.state,
        ...material.state
    }),
    getters: {
        ...audio.getters,
        ...material.getters
    },
    mutations: {
        ...audio.mutation,
        ...material.mutation
    },
    actions: {
        ...audio.actions,
        ...material.actions
    },
}

Вот так просто.

Столько сказано, большая часть ерунда, полезного кода всего десяток строчек, код здесьпортал

Рекомендация плагина vuex persistence

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

Причина, по которой я так думаю, заключается в том, что я недостаточно знаю сущность vuex Сущность vuex — это большой объект JS, который хранится в памяти, подобный следующему

let store={state:{},getter:{}}

new Vue({  store: store})

Как только вы обновите страницу, данные в памяти должны быть очищены, поэтому исчезновение данных в магазине — это нормально. Если вы хотите сохранить, вы можете выбрать vuex и localStorage или sessionStorage или файлы cookie. тебе следует

  1. При отправке мутации одновременно сохраните ее в локальном хранилище (обратите внимание, что если это объект, требуется JSON.stringify)
  2. При обновлении страницы (в созданном методе в App.vue) получите информацию о пользователе из локального хранилища и отправьте мутацию, если она есть.
export const user = {
    state: () => ({
       info:{}
    }),
    getters: {},
    mutation: {
        setUser(state,info){//1. 提交Mutation时，同时存到本地储存中
            localStorage.setItem('user',JSON.stringify(info))
            state.info=info
        }
    },
    actions: {},
}



    created() {
        const userInfo=localStorage.getItem('user')
        if(userInfo){
            // 提交Mutation,更新用户信息
        }
    }

Таким образом, если у вас есть одни данные, вы сохраните их один раз, если у вас есть два данных, вы сохраните их дважды, а если у вас есть n данных, вы сохраните их n раз Это слишком утомительно, поэтому я рекомендую плагин. Он автоматически сохраняется при отправке мутации и автоматически обновляется при обновлении страницы, что очень удобно. Я больше не буду писать демо, я устал.

Адрес плагинаvuex-persistedstate

Эта статья, наконец, закончена. Я не знаю, что написать завтра. Я надеюсь, что каждый может дать несколько предложений и оставить сообщение в области комментариев.

🐢.

Категории