Vuexok

# Tooling

Vuexok внутри использует vuex. Основной целью создания vuexok являлось не создания нового api, а расширение текущего api vuex. Поэтому при миграции у вас не будет необходимости переписывать код компонентов.

TIP

Начиная с версии ххх была измененина инициализация модуля. Подробнее

# Создание модуля

WARNING

Обратите внимание, что vuexok создает динамические модули. Все модули будут зарегистрированы уже после того, как хранилище было создано, используя метод store.registerModule (opens new window)

Обратите внимание, как вызывается мутация plus из экшена increment











 






















import { createModule } from 'vuexok'
import store from '@/store'

export const counterModule = createModule(
  'counterModule',
  {
    namespaced: true,
    state: {
      count: 0,
    },
    actions: {
      async increment() {
        counterModule.mutations.plus(1)
      },
    },
    mutations: {
      plus(state, payload:number) {
        state.count += payload
      },
      setNumber(state, payload:number) {
        state.count = payload
      },
    },
    getters: {
      x2(state) {
        return state.count * 2
      },
    },
  }
)

counterModule.register(store)

TIP

Что бы не несколько модулей не реагировали на тот же тип мутаций/действий рекомендуется создавать модули с собственным пространством имён, указав опцию namespaced: true (opens new window)

# Использование модуля Vuexok в компонентах Vue

Свойство state в модуле реактивно, как и в store.state (opens new window), так что чтобы использовать состояние модуля в компонентах Vue достаточно просто вернуть часть состояния модуля в вычисляемом свойстве (opens new window).

 




 
 
 



import { counterModule } from '@/store/modules/counterModule'

const Counter = Vue.extends({
  template: `<div>{{ count }}</div>`,
  computed: {
    count() {
      return counterModule.state.count // type number
    },
  },
})

# Компоненты Vue на основе классов


 






 
 
 


import Vue from 'vue'
import { counterModule } from '@/store/modules/counterModule'
import Component from 'vue-class-component'

@Component({
  template: '<div>{{ count }}</div>'
})
export default class MyComponent extends Vue {
  private get count() {
    return counterModule.state.count // type number
  }
}

# Composition API


 





 




import { computed, defineComponent } from '@vue/composition-api'
import { counterModule } from '@/store/modules/counterModule'

export default defineComponent({
  template: '<div>{{ count }}</div>',
  setup() {
    return {
      count: computed(() => counterModule.state.count)
    }
  },
})

# Вызов экшенов и мутаций

# Экшены

import { counterModule } from '@/store/modules/counterModule'

// Аналогично вызову
// store.dispatch('counterModule/increment')

counterModule.actions.increment().then(() => {
  console.log('increment called')
})

# Мутации

import { counterModule } from '@/store/modules/counterModule'

// Аналогично вызову
// store.commit('counterModule/setNumber', 10)

counterModule.mutations.setNumber(10)

# Вотчеры

Вотчеры модулей работают также как store.watch (opens new window). Единственная разница заключается в том , что в качестве параметров функции-гетера передаются стейт и гетеры модуля

const unwatch = jwtModule.watch(
  (state, getters) => getters.jwt,
  (jwt) => console.log(`New token: ${jwt}`),
  { immediate: true },
)

← Worker →