Краткое изложение основного использования Vuex

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

Основная идея Vuex: извлечение общего состояния компонентов и управление ими в глобальном одноэлементном режиме.В этом режиме наше дерево компонентов представляет собой огромное «представление», независимо от того, где в дереве любой компонент может получать состояние или запускать поведение. !

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

Функции:

  1. Хранилище состояния Vuex является реактивным.当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

  2. Вы не можете напрямую изменить состояние в хранилище.改变 store 中的状态的唯一途径就是显式地совершить мутацию. Это позволяет нам легко отслеживать каждое изменение состояния, позволяя нам реализовать некоторые инструменты, которые помогут нам лучше понять наше приложение.

vuex

использовать

Используется в одностраничном приложении Vue, вам нужно использоватьVue.use(Vuex)Вызов плагина.
Его очень просто использовать, просто внедрите его в корневой экземпляр Vue.

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
getter: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    increment (state, payload) {
      state.count++
    }
  },
actions: {
  addCount(context) {
    // 可以包含异步操作
    // context 是一个与 store 实例具有相同方法和属性的 context 对象
  }
}
})
// 注入到根实例
new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

Затем измените состояние:

this.$store.commit('increment')

Vuex состоит из четырех основных частей:

  1. состояние: содержитstoreкаждое состояние, хранящееся в .
  2. геттеры: аналогично вычисляемым свойствам в Vue, вычисляйте возвращаемое значение на основе других геттеров или состояния.
  3. мутация: набор методов, которые изменяютstoreИсполнитель среднего состояния.
  4. action: набор методов, которые могут содержать асинхронные действия

state

Использование Vuexstateдля хранения состояния, которым необходимо поделиться в приложении. Чтобы сделать компоненты Vue вstateПосле изменения он также меняется вместе с изменением, и должен основываться наstateСоздайте вычисляемые свойства.

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count  // count 为某个状态
    }
  }
}

getters

Подобно вычисляемым свойствам в Vue, его можно использовать в другихstateилиgetterИзменено автоматически после изменения.
каждыйgetterметод принимаетstateи другиеgettersкак первые два аргумента

getters: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  }

mutations

Первые две – это сами ценности состояния,mutationsИменно исполнитель изменяет состояние.mutationsиспользуется длясинхронно изменять состояние

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

где первый параметрstate, другие параметры позади должны инициироватьmutationпереданные параметры.

this.$store.commit('increment', 10)

commitПервым параметром метода является инициацияmutationИмя, параметры спины включены в дополнительные данныеmutationв определенном методе.
нормативное началоmutationСпособ следующий:

store.commit({
  type: 'increment',
  amount: 10   //这是额外的参数
})

Дополнительные параметры будут инкапсулированы в объект и переданы в качестве второго параметра.mutationв определенном методе.

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

actions

хочуасинхронно изменять состояние, Необходимо использоватьaction.actionнапрямую не меняетсяstate, но инициируетmutation.

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

положить началоactionФорма метода и инициацияmutationТо же самое, только переименовалиdispatch.

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

Правильное использование асинхронности обработки действий

хочу использоватьactionОбработка асинхронной работы проста, просто поместите асинхронную операцию вactionВыполняется в (как в приведенном выше кодеsetTimeout).
Чтобы приступить к соответствующей работе процесса после завершения асинхронной операции, есть два способа:

  1. actionвернутьpromise.
    а такжеdispatchСуть метода заключается в возврате соответствующегоactionрезультат исполнения. такdispatchтакже возвращаетpromise.
store.dispatch('actionA').then(() => {
// ...
})
  1. использоватьasync/await. Код стал более лаконичным.
// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

Объединение отдельных функций с компонентами Vue

Будуstateа такжеgetterВключение в компоненты требует использованиявычисляемое свойство:

computed: {
    count () {
      return this.$store.state.count 
      // 或者 return this.$store.getter.count2
    }
  }

Будуmutationа такжеactionВключение в компоненты требуетmethodsвызыватьthis.$store.commit()илиthis.$store.commit():

methods: {
    changeDate () {
        this.$store.commit('change');
    },
    changeDateAsync () {
        this.$store.commit('changeAsync');
    }
}

Для простоты Vuex предоставляет четыре метода для простого включения этих функций в компоненты.

  1. mapState
  2. mapGetters
  3. mapMutations
  4. mapActions

Образец кода:

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

// ....
computed: {
  localComputed () { /* ... */ },
  ...mapState({
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    count(state) {
      return state.count + this.localCount
    }
  }),
  ...mapGetters({
    getterCount(state, getters) {
      return state.count + this.localCount
    }
  })
}
methods: {
  ...mapMutations({
       add: 'increment' // 将 `this.add()` 映射为`this.$store.commit('increment')`
    }),
  ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
}

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

methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
}

Разделите магазин на модули.

может быть примененоstoreРазделенный на небольшие модули, в каждом модуле также есть все:state, getters, mutations, actions.
Сначала создайте подмодули:

// initial state
const state = {
  added: [],
  checkoutStatus: null
}
// getters
const getters = {
  checkoutStatus: state => state.checkoutStatus
}
// actions
const actions = {
  checkout ({ commit, state }, products) {
  }
}
// mutations
const mutations = {
  mutation1 (state, { id }) {
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

Всего затем вводится в модуль:

import Vuex from 'vuex'
import products from './modules/products' //引入子模块

Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    products   // 添加进模块中
  }
})

На самом деле все еще существует понятие пространства имен, которое используется большими приложениями. При необходимости проверьте документацию. Основное использование Vuex примерно такое же.

Ссылаться на

https://www.jianshu.com/p/aae7fee46c36

https://vuex.vuejs.org/zh/guide/modules.html


Категории