Чи можу я зателефонувати коміту з однієї з мутацій у магазині Vuex

У мене є магазин vuex , наприклад:

import spreeApi from '../../gateways/spree-api'
// initial state
const state = {
  products: [],
  categories: []
}

// mutations
const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   commit('SET_CATEGORIES')
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(function(product) { return product.category})
 }

}

const actions = {
 FETCH_PRODUCTS: (state, filters) => {
   return spreeApi.get('products').then(response => state.commit('SET_PRODUCTS', response))
 }
}

export default {
  state,
  mutations,
  actions
}

Я хочу викликати mutation: SET_CATEGORIESfrom mutation:, SET_PRODUCTSАле це видає мені помилку:

projectFilter.js: 22 Не спійманий (обіцяно) ReferenceError: коміт не визначений (…)

Яким повинен бути правильний спосіб це зробити. Я спробував store.commitі this.commit, але це також дало подібні помилки.

Коли ви вже робите мутацію, немає можливості перейти до commitіншої мутації. Мутація - це синхронний виклик, який змінює стан. За одну мутацію ви не зможете здійснити іншу мутацію.

Ось посилання на API для Vuex: https://vuex.vuejs.org/en/api.html

Як бачите, обробник мутації отримує лише stateі payload, нічого більше. Тому ви отримуєте commitяк undefined.

У наведеному вище випадку ви можете встановити ПРОДУКТ і КАТЕГОРІЇ як частину одного і того ж обробника мутацій як один коміт. Ви можете спробувати, якщо працює наступний код:

// mutations
const mutations = {
    SET_PRODUCTS_AND_CATEGORIES: (state, response) => {
        state.products = response.data.products
        state.categories = state.products.map(function(product) { return product.category})
    },
    // ...
}

EDIT: Будь ласка, зверніться до відповіді нижче, наданої Даніелем С. Дебоером . Правильним методом є здійснення двох мутацій за одну дію, як описано у його відповіді.

Якщо ви абсолютно мусите здійснити дві мутації, чому б не зробити це з дії? Дії не повинні виконувати асинхронні операції. Ви можете деструктурувати метод коміту у своїй дії так само, як це робите із станом так:

commitTwoThings: ({commit}, payload) => {
  commit('MUTATION_1', payload.thing)
  commit('MUTATION_2', payload.otherThing)
}

Для запису. Щоб викликати інші мутації за допомогою методу мутації, зробіть це так:

const mutations = {
    mutationOne(state, payload){
        this.commit("mutationTwo", payload)
    },
    mutationTwo(state, payload){
        console.log("called from another mutation", payload)
    }
}

Щоб розподілити код між мутаціями, потрібно створити нову функцію, яка виконує роботу, яку потім можна використовувати повторно. На щастя, мутації - це звичайні старі функції, і ми можемо передатиstate параметр навколо, як нам подобається, тому це зробити досить просто.

Наприклад:

const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   setCategories(state)
 },
 SET_CATEGORIES: (state) => {
   setCategories(state)
 }
}

function setCategories(state) {
  state.categories = state.products.map(product => product.category)
}

І якщо у мене є якийсь загальний код, який впливає на стан між кількома мутаціями, я повинен дублювати той самий код на всіх своїх мутаціях? Або є кращий спосіб це зробити?

Читаючи документацію Vuex про Action , цілком зрозуміло, для чого вони створені.

• здійснювати мутації замість мутації стану
• може містити довільні асинхронні операції

Дії можуть (не повинні ) містити асинхронний код. Насправді наступний приклад правильний

increment (context) {
   context.commit('increment')
}

Я не бачу жодної проблеми у використанні дій для виконання кількох мутацій.

У вашому випадку ви повинні розглянути можливість мати лише одну мутацію, а саме SET_PRODUCTS.

// mutations
const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   state.categories = state.products.map(function(product) { return product.category})
 }
}

У вас ніколи не повинно виникати необхідності телефонувати SET_CATEGORIES окремо. Подумай над цим! Категорії можуть мутувати лише за умови зміни товарів. А товари можуть змінюватися лише через SET_PRODUCTS.

Редагувати: Я натрапив на дуже подібну проблему, і рішенням для мене було використання гейтера vuex: https://vuex.vuejs.org/en/getters.html
Ваші категорії насправді є "обчислюваною" версією ваших продуктів. Наявність категорій як геттера дозволяє синхронізувати їх із продуктами та уникає дублювання даних у вашому магазині.

Для відповіді на запитання в заголовку я залишаю свою оригінальну відповідь.
Альтернатива рішення Даніеля Бакмастера:

const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   this.SET_CATEGORIES(state)
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(product => product.category)
 }
}

Як бачите, ви можете безпосередньо викликати саму мутацію. (як сказав Даніель, це все-таки просто функції)
Я вважаю, що це більш відповідна відповідь на вихідне питання: це фактичний спосіб складання мутацій без дублювання коду або зайвих функцій

Спочатку призначте кнопку Vue змінній: У main.js:

  export const app = new Vue({  
  router,
  vuetify,
  store,....

Потім імпортуйте змінну "app" у файл js, де ви визначите мутацію: У modules.js:

import { app } from "../../main";

Тепер ви можете використовувати його як "додаток. $ Store.commit":

mutations: {
[AUTH_SET_TOKEN]: () => {
app.$store.commit(USER_SUCCESS, params );
},...

Я вважаю за краще зателефонувати, mutations.SET_CATEGORIES(state)а не: - викликати 2 різні коміти від штучної дії - або робити commit()всередині мутації, оскільки це ускладнює модульне тестування.

const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   mutations.SET_CATEGORIES(state)
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(product => product.category)
 }
}

На мою думку, вам не потрібно бачити SET_CATEGORIESу VueToolbox. Подорож у часі повинна працювати в будь-якому випадку. Будь ласка, виправте мене, якщо я помиляюся.

Я думаю

називати мутацію з іншої мутації поганою ідеєю через важкий для налагодження стан та компоненти

const mutations = {
    mutationOne(state, payload){
        this.commit("mutationTwo", payload)
    },
    mutationTwo(state, payload){
        console.log("called from another mutation", payload)
    }
}

але ви можете написати просту функцію, і функція може бути багаторазовою

function mysecondfn(state,payload){
{
// do your stuff here
}


const mutations = {
    mutationOne(state, payload){
mysecondfn(state,payload)
     },

}

import spreeApi from '../../gateways/spree-api'
// initial state
const state = {
  products: [],
  categories: []
}

// mutations
const mutations = {
 SET_PRODUCTS: (state, {response,commit}) => { // here you destructure the object passed to the mutation to get the response and also the commit function
   state.products = response.data.products
   commit('SET_CATEGORIES') // now the commit function is available
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(function(product) { return product.category})
 }

}

const actions = {
 FETCH_PRODUCTS: ({commit}, filters) => { // here you destructure the state to get the commit function
   return spreeApi.get('products').then(response => commit('SET_PRODUCTS', {response,commit})) // here you pass the commit function through an object to 'SET_PRODUCTS' mutation
 }
}

export default {
  state,
  mutations,
  actions
}

Це повинно це виправити. Ви можете ввести коміт у свою мутацію з дії, щоб ви могли зробити коміт із своєї мутації. Сподіваюся, це допомагає