Режим управления состоянием Vue — vuex

внешний интерфейс JavaScript Vue.js Vuex

предисловие

Если вы используете Vue.js, у вас должен быть большой опыт передачи параметров между компонентами. Когда родительскому и дочернему компонентам необходимо взаимодействовать, мы часто используем метод передачи параметров. На самом деле, помимо способа передачи параметров, мы также можем рассмотреть вопрос о том, использовать ли Vuex для решения задачи в сочетании с потребностями бизнеса.

Что такое Векс?

Определение из официальной документации: Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. Он использует централизованное хранилище для управления состоянием всех компонентов приложения и использует соответствующие правила для обеспечения предсказуемого изменения состояния.

режим управления состоянием,Централизованное управление хранениемЭто немного сложно понять, если вы понимаете это в первый раз, мы углубляем наше понимание с помощью этой картинки, представленной в официальной документации.

Vuex — это дизайнерское мышление. Ядром каждого приложения Vuex является Магазин. Состояние и данные компонента управляются в едином состоянии пространства памяти, а данные состояния сопоставляются с компонентом.Когда данные компонента изменяются, состояние изменяется с помощью действий отправки или прямых мутаций фиксации. Мы не можем напрямую изменить состояние в состоянии. Единственный способ изменить состояние в состоянии — это явно зафиксировать Mutations. Это позволяет нам легко отслеживать изменение каждого состояния, чтобы мы могли реализовать некоторые функции, которые помогут нам лучше понять наше приложение. После изменения состояния оно отражается на компоненте, образуя замкнутый цикл.

Когда в прошлом взаимодействовали компоненты родитель-потомок, мы обычно использовали метод props+emit. Vuex подходит для более сложных сценариев использования. Например:

  • Решите совместное использование состояния между несколькими одноуровневыми компонентами с низкой корреляцией.
  • Скачок решают комплексную маршрутизацию между параметром прохождения

Практическое применение

npm install vuex --save

Затем добавьте папку хранилища в каталог src каталога проекта следующим образом.

в:

  • index.js: файл ввода
  • state.js: сохраняет состояние. То есть переменные.
  • getters.js: производное состояние. Это также можно понимать как попасть в набор и получить. Есть два необязательных параметра, состояние и геттеры, которые могут получать переменные в состоянии и других геттерах соответственно. Аналогично вычислению в vue.
  • Мутации. Это можно понять как установлено в набор и получить. Каждая мутация имеет тип мероприятия и функцию обратного вызова. Первый параметр по умолчанию для состояния. Единственный способ изменить состояние в Vuex не поддерживает асинхронные операции. Похоже на методы в Vue.
  • Mutation-types.js: строковые константы, связанные с мутациями, сохраняются для легкого обнаружения и управления.
  • action.js: аналогично мутациям. Он поддерживает асинхронные операции, а также может инкапсулировать мутации.

Пример state.js:

const state = {
    userInfo: {}
};
export default state;

userinfo хранит информацию, которую нам нужно отправить

Пример мутации-types.js:

export const SET_USERINFO = 'SET_USERINFO';

Пример мутации.js:

import * as types from './mutation-types'

const mutations = {
    [types.SET_USERINFO](state, userInfo) {
        state.userInfo = userInfo;
    }
}

Это объект, в котором хранятся некоторые методы.Имя метода – это имя константы, хранящееся в мутациях-типах.Первый параметр соответствует состоянию в файле state.js, второй параметр – переданный параметр.

Пример Getters.js:

export const userInfo = state => state.userInfo;

Получить состояние состояния компонента.

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'

import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

// 开发环境为true，生产环境为false
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    plugin: debug ? [createLogger()] : []
})



import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})

После завершения этих основных конфигураций следующим шагом будет вызов проекта. Vuex предоставляет нам ряд синтаксических сахаров: mapMutations, mapGetters, mapActions, что избавляет от утомительных операций. Мы можем вызвать его напрямую так, как Vue вызывает методы и вычисляет.

Во-первых, давайте посмотрим на часть first.vue первого шага:template:

<template>
  <div class="page">
    <div>姓名： <input type="text" v-model="name"></div>
    <div>年龄： <input type="text" v-model="age"></div>
    <div>
      <button @click="jumpToNextPage">下一页</button>
    </div>
  </div>
</template>

script:

import { mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      name: '张三',
      age: '20',
      personInfo: {}
    };
  },
  methods: {
    jumpToNextPage() {
      this.personInfo.name = this.name;
      this.personInfo.age = this.age;
      this.$router.push({
        path: `/second/`
      });
      this.setInfo(this.personInfo);
    },
    ...mapMutations({
      setInfo: 'SET_USERINFO'
    })
  }
};

На этом шаге мы получаем информацию, заполненную пользователем, и отправляем ее на мутации.

Во-первых, нам нужно ввести mapMutations из vuex для управления изменениями состояния. Согласно методу, предоставленному документацией, он вызывается оператором распространения в методах. Нам нужно сделать маппинг в mapMutations, setInfo соответствует константе SET_USERINFO в мутациях-типах. Затем, когда нажата кнопка перехода на следующую страницу, выполняется метод this.setUser() и передаются информационные параметры.

После изменения мутаций следующим шагом будет получение изменений состояния на второй странице.

Далее давайте посмотрим на вторую часть.vue:template:

<template>
    <div class="page">
      姓名：{{userInfo.name}}
      年龄：{{userInfo.age}}
    </div>
</template>

script:

import { mapGetters } from "vuex";
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  created() {
    console.log(this.userInfo);
  },
  methods: {
  }
};

На первом этапе нам также нужно ввести mapGetter из vuex. Затем в вычисляемые данные, которые необходимо получить, также вводятся способом оператора спреда. Здесь userInfo соответствует userInfo, определенному в getter.js.

Таким образом, мы завершили весь процесс от модификации и отправки данных до получения данных через vuex.

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

Пример Action.js:

import * as types from './mutation-types';

export const actionsSetUserInfo = function ({ commit, state }, userInfo) {
  commit(types.SET_USERINFO, userInfo);
}

После введения типов мутаций определите функцию для отправки мутации, actionSetUserInfo. commit и state — параметры по умолчанию, а userInfo — измененные данные параметра.

На данный момент first.vue изменен на:

import { mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      name: '张三',
      age: '20',
      personInfo: {}
    };
  },
  methods: {
    jumpToNextPage() {
      this.personInfo.name = this.name;
      this.personInfo.age = this.age;
      this.$router.push({
        path: `/second/`
      });
      this.actionsSetUserInfo(this.personInfo);
    },
    ...mapActions([
      'actionsSetUserInfo'
    ])
  }
};

Таким образом выполняется actionSetUserInfo в action.js. Измените информацию о пользователе в состоянии с помощью изменения фиксации.

заключительные замечания

Простое понимание Vuex заключается в том, чтобы хранить все переменные, которые должны быть разделены между компонентами, в объекте, а затем этот объект помещается в компонент верхнего уровня для использования другими компонентами. Просто нам нужно хранить и извлекать эти данные в соответствии с правилами, указанными Vvuex.

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

Категории