【Vue3】Управление состоянием Vuex

Приложение: В 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, чтобы сделать его модулем с пространством имен.
  

После установки для пространства имен значения true метод вызова страницы меняется.

Модули также могут изменять или распространять корневые компоненты!