Могу ли я вызвать фиксацию из одной из мутаций в магазине Vuex

Когда вы уже делаете мутацию, нет возможности 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})
    },
    // ...
}

РЕДАКТИРОВАТЬ: См. ответ ниже, предоставленный Дэниелом С. Дебоером. Правильный метод - совершить две мутации из одного действия, как описано в его ответе.

Если вам абсолютно необходимо совершить две мутации, почему бы не сделать это из действия? Действия не обязательно должны выполнять асинхронные операции. Вы можете деструктурировать метод фиксации в своем действии так же, как и с таким состоянием:

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 о действиях, становится совершенно ясно, для чего они созданы.

• совершать мутации вместо изменения состояния
• может содержать произвольные асинхронные операции

Действия могут (не должны) содержать асинхронный код. На самом деле следующий пример верен

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";

Теперь вы можете использовать его как app. $ store.commit:

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

Я предпочитаю вызывать mutations.SET_CATEGORIES(state) вместо: - вызова двух разных коммитов из искусственного действия - или выполнения 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)
     },

}

другое решение, которое работает для меня:

this._mutations.mutationFunction[0]()

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
}

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