Как менять состояние из компонента. Так делать не стоит но все же можно:

this.$store.state.user.info.new_messages_count++
# получение данных геттера
const data = this.$store.getters['data/data'](this.$route.query.name)

 

 

Освоение Vuex — с нуля до героя               пересказ статьи

Vuex можно рассматривать как единственный источник истины для всего приложения.

export default {
  state,  // JSON-объект
  getters, // Функции(state) будут возвращать данные из хранилища компонентам
//МУТАЦИИ СИНХРОННЫ  у них одна задача - изменить state
  mutations, // Функции(state, JSON-объект). Вызов this.$store.commit('SET_NAME', your_name); 
//Действия делают две задачи: обращаются к АПИ и потом вызывают мутации
  actions, // Функции(state, JSON-объект). Вызов this.$store.dispatch('SET_NAME', your_name);
};

ВОЗЬМИТЕ ЗА ПРАКТИКУ НИКОГДА НЕ ИНИЦИИРОВАТЬ МУТАЦИИ НАПРЯМУЮ. ДЛЯ ЭТОГО ВСЕГДА ИСПОЛЬЗУЙТЕ ДЕЙСТВИЯ.

 Пример :

mutations: {
  SET_NAME: (state, name) => {
    state.name = name;
  },
},

actions: {
  SET_NAME: async (context, name) => {
    let {data} = await Axios.post('http://myapiendpoint.com/api/name', {name: name});

    if (data.status == 200) {
      context.commit('SET_NAME', name);
    }
  },
}

 

ХРАНИЛИЩЕ VUEX НЕ ПРОСТО ИСТОЧНИК ТЕКУЩЕГО СОСТОЯНИЯ ВАШЕГО ПРИЛОЖЕНИЯ. ОНО ТАКЖЕ ЯВЛЯЕТСЯ ЕДИНСТВЕННОЙ ТОЧКОЙ, КОТОРАЯ ДОЛЖНА ИЗМЕНЯТЬ ЭТО СОСТОЯНИЕ.

 

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import Axios from 'axios';
import todos from './modules/todos';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    todos,
  },
});

/modules/todos.js

import Axios from 'axios';

state = {
  todos: null,
};

getters = {
  TODOS: state => {
    return state.todos;
  },
};

mutations = {
  SET_TODO: (state, payload) => {
    state.todos = payload;
  },

  ADD_TODO: (state, payload) => {
    state.todos.push(payload);
  },
};

actions = {
  GET_TODO: async (context, payload) => {
    let {data} = await Axios.get('http://yourwebsite.com/api/todo');
    context.commit('SET_TODO', data);
  },

  SAVE_TODO: async (context, payload) => {
    let {data} = await Axios.post('http://yourwebsite.com/api/todo');
    context.commit('ADD_TODO', payload);
  },
};

export default {
  state,
  getters,
  mutations,
  actions,
};