Управление состоянием Vuex
-
-
- Приложение: В eslin указано, что если не используется, будет сообщено об ошибке.
- Понимание управления состоянием приложения
- Базовое использование Vuex
- Состояние
- Мутации
- Действия
- Геттеры
- Модули
-
-
- Шаг 1. Создайте подмодули
- Шаг 2. Импортируйте подмодули в основной модуль.
- Шаг 3. При использовании данных в состоянии на странице добавьте слой подмодулей.
- Шаг 4. При использовании данных в геттерах на странице нет необходимости добавлять слой подмодулей, просто используйте
- пространство имен подмодуля
- После установки для пространства имен значения true метод вызова страницы меняется.
- Модули также могут изменять или распространять корневые компоненты!
-
-
Приложение: В eslin указано, что если не используется, будет сообщено об ошибке.
- Очень неудобно, иди и закрой.
Понимание управления состоянием приложения
Что такое государственное управление
- В ходе разработки требуется различная обработка данных. Эти данные необходимо сохранить где-то в нашем приложении, а управление ими — это управление состоянием.
Государственное управление в старой модели
- Использование компонентной разработки в vue
- В компоненте мы определяем данные или возвращаем использованные данные в настройке. Эти данные называются состоянием
- Эти данные можно использовать в шаблоне.Шаблон отображается в DOM, который мы называем View.
- Поведения, генерируемые в модуле, могут изменять состояние при обработке этих поведенческих событий.Это поведенческое событие называется действиями.
Базовое использование Vuex
- При управлении состоянием сложных данных они будут становиться все более большими.
- Когда программа сложная. Сами государства также будут влиять друг на друга, и их станет трудно контролировать.
- Решение:
- Рассмотрите возможность извлечения внутреннего состояния компонента и управления им как глобальным синглтоном.
- В этом режиме внутри дерева компонентов формируется огромное представление.
- Независимо от того, где он находится в дереве, любой компонент может получить статус или инициировать поведение в любое время.
- Управляйте концепциями, определяя и изолируя состояния, а также поддерживая независимость между представлениями и состояниями с помощью применимых правил.
Установить Вуекс
npm install vuex
единое дерево состояний
- Vuex использует одно дерево состояний.
- Содержит все состояние уровня приложения в одном объекте.
- Используется SSOT, который представляет собой единый источник данных, то есть хранилище только одно.
- Преимущество: единое дерево состояний позволяет нам находить фрагменты определенного состояния самым прямым способом.
Состояние
- Обычно создайте новую папку магазина и файл index.js.
- монтирование импорта main.js
Как использовать vuex (Vue3)
-
Данные могут быть изменены.Официально не рекомендуется напрямую изменять состояние.Мутации должны быть представлены.
-
Мутации изменяют модификацию состояния
Вспомогательная функция mapState (Vue2)
- Сопоставление состояния вычисляемых свойств в Vue2
- Через вспомогательную функцию mapState
Мутации
- Важный принцип: мутации должны быть синхронными функциями.
- Это связано с тем, что инструмент разработчика будет записывать журнал мутаций.
- Каждая мутация записывается, инструменты разработчика должны делать снимки предыдущего и следующего состояний.
- Однако при выполнении асинхронных операций в мутации изменения данных отследить невозможно.
- vue2 в
- Через метод фиксации
Использование мутаций и параметров переноса (Vue2)
- vue2 в
- Представление стиля объекта
Как писать мутации, используя имена определений констант (Vue2)
- Шаг 1. Создайте новое место для централизованного управления константами и их экспорта.
- Шаг 2. Импортируйте и определите соответствующий метод в vuex.
- Шаг третий: использование страницы
Использование мутаций (Vue3)
<template>
<div class="app">
<h3>当前vuex的值:{
{
$store.state.num }}</h3>
<h3>当前vuex的值:{
{
$store.state.num1 }}</h3>
<button @click="setnum">修改vuex值</button>
<button @click="getnum">mutations修改vuex值</button>
</div>
</template>
<script setup>
import {
useStore } from "vuex";
const store = useStore();
function setnum(){
store.commit('setrenum')
}
function getnum(){
store.commit('Textnum',{
name:"乞力马扎罗"})
}
</script>
Действия
Использование действий (Vue2)
- Действия вызывают мутации, а не непосредственно изменяют состояние.
- действия могут содержать любую асинхронную операцию
- (контекст параметра)
- context — это объект контекста с теми же методами и свойствами, что и экземпляр хранилища.
- Поэтому. Вы можете получить из него метод фиксации, чтобы отправить мутацию.
- также. Состояние и геттеры можно получить через context.state и context.getters.
- Изменить объект
Использование страницы
- В vue2 получите
getnum() {
this.$store.dispatch("getnumAct");
},
- Изменить объект
setnum() {
let obj ={
name:"乞力马扎罗",
type:1,
}
this.$store.dispatch("setnumAct",obj);
},
Страница немного громоздка в использовании, и на ней предусмотрены вспомогательные функции (Vue2).
Отображение использования действий (Vue3)
<template>
<div class="app">
<h3>当前vuex的值:{
{
$store.state.num }}</h3>
<h3>当前vuex的值:{
{
$store.state.num1 }}</h3>
<button @click="setnumAct({ name: 'qqq' })">修改vuex值</button>
<button @click="getnumAct">Actions修改vuex值</button>
</div>
</template>
<script setup>
import {
mapActions, useStore } from "vuex";
const store = useStore();
// const { getnumAct, setnumAct } = mapActions(["setnumAct", "getnumAct"]);
// 直接使用是使用不了的,因为这个方法里面本身是this.$store这样的方式的,setup里面不支持
// 解决方法
// 循环,通过bind,将store绑定在store身上
const actions = mapActions(["setnumAct", "getnumAct"]);
const newobject = {
};
Object.keys(actions).forEach(key => {
newobject[key] = actions[key].bind({
$store: store });
});
const {
getnumAct, setnumAct } = newobject;
</script>
Метод использования действий по умолчанию — Vue3)
<template>
<div class="app">
<h3>当前vuex的值:{
{
$store.state.num }}</h3>
<h3>当前vuex的值:{
{
$store.state.num1 }}</h3>
<button @click="setnum">修改vuex值</button>
<button @click="getnumAct">Actions修改vuex值</button>
</div>
</template>
<script setup>
import {
mapActions, useStore } from "vuex";
const store = useStore();
//
function setnum() {
store.dispatch("setnumAct", {
name: "qqq" });
}
//
function getnum() {
store.dispatch("getnumAct");
}
</script>
Асинхронный вызов действий (Vue3)
- Цель — узнать, когда действие закончится.
actions: {
getnumAct(context) {
return new Promise((resolve, reject) => {
resolve()
})
}
}
Геттеры
- Возможно, нам придется изменить некоторые атрибуты перед их использованием.В этом случае необходимы геттеры.
- Параметр 1, состояние получает данные, определенные состоянием
- Второй параметр представляет другие геттеры и может вызывать другие геттеры в геттерах.
Использование данных для получения страниц (Vue2)
- Vue2
- Способ 1: вызов страницы напрямую
- Способ 2: вызов через вспомогательную функцию mapGetters
- Передача toRefs в настройке vue3 (Vue3)
<script setup>
import {
toRefs } from "vue";
import {
useStore } from "vuex";
const store = useStore();
const {
addnum} =toRefs(store.getters)
</script>
- Способ 2: через вычисляемый атрибут (Vue3)
<script setup>
import {
computed } from "vue";
import {
useStore } from "vuex";
const store = useStore();
const {
addnum} =computed(()=>store.getters.num)
</script>
Модули
- Благодаря использованию единого дерева состояний все состояния приложения будут сосредоточены в относительно большом объекте.Когда приложение становится очень сложным, объект хранилища становится очень сложным.
- Чтобы решить вышеуказанную проблему, Vuex позволяет нам разбить хранилище на модули (модули).
- Каждый модуль имеет свое собственное состояние, мутацию, действие, метод получения и даже вложенные подмодули.
Шаг 1. Создайте подмодули
- Вы можете создать новое место специально для хранения подмодулей.
Шаг 2. Импортируйте подмодули в основной модуль.
Шаг 3. При использовании данных в состоянии на странице добавьте слой подмодулей.
Шаг 4. При использовании данных в геттерах на странице нет необходимости добавлять слой подмодулей, просто используйте
<h3>当前vuex的值:{
{
$store.state.home.num1 }}</h3>
<h3>当前vuex的getters值:{
{
$store.getters.addnum }}</h3>
пространство имен подмодуля
- Обратите внимание, что мутации, геттеры и действия в подмодулях в конечном итоге будут объединены с основным модулем, и именование не может быть повторено с другими модулями.
- То есть по умолчанию. Действия, мутации и методы получения внутри модуля по-прежнему регистрируются в глобальном пространстве имен.
- Это позволяет нескольким модулям реагировать на одно и то же действие, мутацию или геттеры.
- Если мы хотим, чтобы модуль имел более высокую инкапсуляцию и возможность повторного использования, мы можем добавить namespaced: true, чтобы сделать его модулем с пространством имен.