Управление глобальным состоянием апплета WeChat и предоставление опыта разработки Vuex.

внешний интерфейс JavaScript Апплет WeChat Vuex

1. Обзор

Опыт разработки апплета WeChat аналогичен vue и react, но он не предоставляет механизма глобального управления состоянием, поэтому совместное использование состояния может быть достигнуто только посредством передачи атрибутов. Этот подход все еще может обеспечить эффективность разработки в небольших приложениях, но в сложных приложениях компоненты глубоко вложены друг в друга, и путь для передачи атрибутов слишком длинный.

Итак, я хочу использовать объект данных в апплете Page для создания глобального хранилища, отвечающего следующим требованиям:

  • Доступ к хранилищу может получить любой компонент на текущей странице, и этот доступ осуществляется напрямую, а не через свойства.
  • Глобальное хранилище соответствует компоненту, то есть изменение хранилища может привести к перерисовке компонента.
  • И страницы, и компоненты могут изменять состояние хранилища, не нарушая исходную отзывчивость.
  • Обеспечьте опыт разработки, подобный Vuex, и сократите затраты на обучение.

Сначала прикрепите исходный код гитхаб-адрес

2. Используйте

Давайте сначала пропустим принцип и посмотрим, как его использовать.

2.1 Установка

Поместите Store.js в папку проекта мини-программы WeChat, например /lib/Store.js.

2.2 Создание объекта страницы

Здесь мы проходимwxappStore.createPageсоздавать. Сравните разницу между Store.js и исходным методом создания

// 原来的创建方法
Page({
  data: {
    message: ''
  },
  onLoad: function () {
    this.setData({
        message: 'hello world'
    })
  }
})

// 增加全局状态管理之后
import wxappStore from "../../lib/Store.js";

Page(wxappStore.createPage({
    // 第一个参数和原来传入Page方法的option没有区别。其中的data会作为全局共享对象来使用。
    data: {
        message: ''
    },
    onLoad: function () {
        // 通过dispatch方法，进行一个异步操作。  
        this.store.dispatch({ 
            name: 'testAction',
            payload: 'hello world'
        });
        // 通过commit方法，修改全局状态。
        this.store.commit({ 
            name: 'testMutation',
            payload: 'hello world'
        });
    }
}, 
// 第二个参数是一个对象，其中包含mutations和actions
{
    mutations: {
        testMutation: function({ setData, payload, data }) {
            setData({
                message: payload
            });
        }
    },
    actions: {
        testAction: function ({ commit, payload, data }) {
            setTimeout(() => {
                commit({
                    name: 'testMutation',
                    payload: payload
                });
            });
        }
    }
}))

wxappStore.createPageМетод имеет два параметра.

Первый параметр ничем не отличается от параметра, изначально переданного методу Page. Данные в нем будут использоваться как глобальный общий объект.

Второй параметр — это объект, содержащийmutationsа такжеactions

2.3 Использование мутаций

Мутация похожа на мутацию в Vuex, она синхронно изменяет состояние. Может быть вызван коммитом.

2.3.1 Определение мутаций

мутации вwxappStore.createPageопределяется во втором параметре , который используется для изменения глобального состояния. Мутации обычно синхронны. Аргументом метода мутации является объект с тремя свойствами:

  • setData function: используется для изменения глобального состояния. Изменение состояния непосредственно в апплете WeChat не приведет к повторному входу на страницу.
  • payload object: измененное состояние, которое может быть объектом или базовым типом данных, например String.
  • data object: Текущее состояние
mutations: {
    testMutation: function({ setData, payload, data }) {
        setData({
            message: payload
        });
    }
},

2.3.2 Мутация вызова

Мутация вызывается через метод фиксации, а ее параметром является объект, содержащий два свойства:

  • name String: название мутации
  • payload Object: состояние, которое необходимо изменить, аналогично полезной нагрузке Vuex.
this.store.commit({ 
    name: 'testMutation',
    payload: 'hello world'
});

2.4 Использование действий

Концепция действия похожа на концепцию действия в Vuex, обычно включает асинхронную операцию, а операция фиксации выполняется после завершения асинхронной операции.

2.4.1 Определение действий

Параметр метода действия — это параметр, который содержит 3 свойства:

  • commit function: выполнить операцию фиксации
  • payload Object: объекты данных и типы Vuex
  • data Object: Текущее состояние
actions: {
    testAction: function ({ commit, payload, data }) {
        setTimeout(() => {
            commit({
                name: 'testMutation',
                payload: payload
            });
        });
    }
}

2.4.2 Вызов действия

Действие вызывается через метод dispatch, а его параметром является объект, содержащий два свойства:

  • name String: название действия
  • payload Object: состояние, которое необходимо изменить, аналогично полезной нагрузке Vuex.
this.store.dispatch({ 
    name: 'testAction',
    payload: 'hello world'
});

2.5 Создать компонент

В Component нам нужно сделать две вещи

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

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

Здесь Store.j проходитwxappStore.createCompЧтобы создать Компонент, он будет реализовывать функцию управления глобальным состоянием для Компонента через прокси.

import wxappStore from "../lib/Store.js";

Component(wxappStore.createComp({
  data: {
    localtimeData: ''
  },
  ready: function () {
    // 绑定全局状态
    this.getGlobalData({ globalDataKey: 'localtime', localDataKey: 'localtimeData' });

    // 改变全局状态  
    this.store.commit({
        name: 'testMutation',
        payload: (new Date()).toLocaleTimeString()
    })
  }
}))


<view>读取全局状态：{{localtimeData}}</view>

2.5.1 Привязка глобального состояния

привязка глобального состояния черезgetGlobalDataЭтот метод экземпляра реализован, этот метод не находится в среде выполнения апплета, он вставляется в экземпляр компонента во время выполнения Store.js.

getGlobalDataбольше не могуcreatedВызывается в обратном вызове, должен быть методом экземпляра компонентаsetDataбольше не могуcreatedназывается в.

getGlobalDataАргумент — это объект, который содержит два свойства:

  • globalDataKey String: это свойство представляет собой имя свойства, для которого требуется глобальное состояние, которое будет привязано к локальному состоянию компонента.
  • localDataKey String: это свойство представляет имя свойства локального состояния, которое будет привязано к глобальному состоянию.
// 绑定全局状态
this.getGlobalData({ globalDataKey: 'localtime', localDataKey: 'localtimeData' });

2.5.2 Изменение глобального состояния

можно использоватьstore.commitилиstore.dispatch,storeОн не встроен в рабочую среду апплета, а также вставлен в каждый экземпляр компонента через Store.js. Его использование аналогично тому, что используется в Page.

3. Недостатки этой структуры

  • Store.js заимствует атрибут данных объекта Page для полного управления глобальным состоянием, поэтому ответственность атрибута данных не является единственной. Атрибут данных объединяет функциональность ViewModel страницы с функциональностью глобального состояния. Однако атрибут данных в Page также имеет глобальное значение, поэтому конфликт между ними невелик.

  • Ответственность атрибута данных в компоненте не единственная. Он сочетает в себе функциональность локальных свойств с функциональностью привязки глобального состояния. Более того, модификация данных в компоненте напрямую через setData не может инициировать изменение глобального состояния, потому что область действия данных ограничена текущим компонентом и должна проходить черезstore.commitилиstore.dispatchЗапускает изменение глобального состояния.

  • Если вы обнаружите другие проблемы, пожалуйста, оставьте сообщение, мы добьемся прогресса вместе!

4. Написание полностью исчерпано, и впринципе буду ждать следующего обновления. . . .

Категории