vuex модульный (модуль)

Vue.js

1. Зачем использовать модули

Благодаря использованию единого дерева состояний все состояния приложения будут агрегированы в относительно большой объект. Когда приложение становится очень сложным, объект хранилища может сильно раздуться.

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

Пространства имен

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

Если вы хотите, чтобы ваш модуль был более инкапсулированным и пригодным для повторного использования, вы можете сделать его модулем с пространством имен, добавив namespaced: true . Когда модуль регистрируется, все его геттеры, действия и мутации автоматически именуются в соответствии с путем, зарегистрированным модулем.

2. Загрузите векс

npm i vuex 
yarn add vuex // yarn

3. Измените store.js

  • Добавить папку магазина в папку src
  • поместите store.js в папку магазина, переименуйте store.js в index.js
  • Добавьте папку modules в папку store для хранения нашего модуля js.

4. Используйте постоянство состояния vuex-persistedstate

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

    1. Скачать vuex-persistedstate
npm i vuex-persistedstate
yarn add vuex-persistedstate // yarn
    1. Использовать vuex-persistedstate
  • Мы можем изменить расположение нашего хранилища через параметр хранилища
  • Зарегистрируйте модули в файле модулей
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

import common from './modules/common'

export default new Vuex.Store({
  modules: {
    common, // 公用
  },
  plugins: [
    createPersistedState({
      storage: window.sessionStorage, // 修改存储的状态
      // paths: ['common'] // 存储的指定的模块的名字（存储某个模块对象）
    })
  ] // 状态持久化
})

5. Создайте модуль

  • Создайте common.js в папке модуля
  • Внесите common.js в store/index.js и зарегистрируйте его в модулях.
  • Здесь сделан простой пример, остальные реализованы таким же образом.
// state
const state = {}
// mutations
const mutations = {}
// getters
const getters = {}
// actions
const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

6. state

  • установить состояние
// state
const state = {
   token:''
}
  • Вспомогательная функция mapState получить
// state
<script>
import { mapState } from 'vuex'
export default {
 computed: {
   // 方式1
   ...mapState('common', ['token']),//  映射为 `this.$store.state.common.token`
   // 方式2
    token () {
       return this.$store.state.common.token
    }
 }
}
</script>
  • Использование может использовать this.token для получения данных нашего токена, состояния, геттеров, мутаций, действий — все это можно получить одним и тем же способом.

7. Getter

  • установить геттеры

Vuex позволяет нам определять «геттеры» (которые можно рассматривать как вычисляемые свойства хранилища) в хранилище. Как и вычисляемые свойства, возвращаемое значение метода получения кэшируется на основе его зависимостей и пересчитывается только при изменении его зависимостей.

Getter принимает состояние в качестве своего первого параметра:

Если вы хотите использовать глобальное состояние и геттер, rootState и rootGetter передаются геттеру в качестве третьего и четвертого параметров,

// Getter
const getters = {
   getToken(state){
       return state.token
   }
}
  • Вспомогательная функция mapGetters для получения
// Getter
<script>
import { mapGetters } from 'vuex'
export default {
 computed: {
   // 方式1
   ...mapGetters('common', ['getToken']), //  映射为 `this.$store.getters.common.getToken`
   // 方式2
    getToken () {
       return this.$store.getters.common.getToken
    }
 }
}
</script>

8. Mutation

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

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

Параметры: принять состояние в качестве первого параметра, данные Второй параметр — это данные, которые нам нужно установить, имя этого параметра можно установить в соответствии с нашими потребностями.

  • Mutation
// Mutation
//设置常量
const SET_TOKEN_DATA = 'setTokenData'
const mutations = {
  [SET_TOKEN_DATA](state,data){
      state.token = data;
  }
}
  • Вспомогательная функция mapMutation для получения
// Mutation
<script>
import { mapMutations } from 'vuex'
export default {
 methods:{
     // 方式1
     ...mapMutations('common',[
        'setTokenData'  // 将 `this.setTokenData()` 映射为 `this.$store.commit('common/setTokenData')`
     ]),
     // 方式2 可以用设置别名的方式
      ...mapMutations({
        setToken: 'common/setTokenData' 
        // 将 `this.setToken('123')` 映射为`this.$store.commit('common/setTokenData','123')`
     }),
     // 方式3 直接调用  this.$store.commit('common/setTokenData','123')
 }
}
</script>

9. Action

  • Действия вызывают мутации, а не изменения состояния напрямую.
  • Действие может содержать произвольные асинхронные операции.

Функция Action принимает объект контекста с теми же методами и свойствами, что и экземпляр хранилища, поэтому вы можете вызвать context.commit, чтобы зафиксировать мутацию, или получить состояние и геттеры через context.state и context.getters.

// Action
const Action = {
  // 参数params：传入的参数（参数名可以根据需求设置）
  // 方式1
  getTokenData(context,params){
      context.commit(SET_TOKEN_DATA, params)
  },
  // 方式2  参数解构的方式
   getTokenData({ commit },params){
      commit(SET_TOKEN_DATA, params)
  },
}
  • Вспомогательная функция mapMutation для получения
// state
<script>
import { mapActions } from 'vuex'
export default {
 methods:{
     // 方式1
     ...mapActions('common',[
        'getTokenData'  // 将 `this.getTokenData()` 映射为 `this.$store.dispatch('common/getTokenData')`
     ]),
     // 方式2 可以用设置别名的方式
      ...mapActions({
       getData:'common/getTokenData'
        // 将 `this.getData('123')` 映射为`this.$store.dispatch('common/getTokenData','123')`
     }),
     // 方式3 直接调用 this.$store.dispatch('common/getTokenData','123')
 }
}
</script>

Неадекватность, пожалуйста, не стесняйтесь советовать! ! !

Категории