Vuex простой пример

Простой пример использования vuex. Устанавливаем vuex используя команду npm

npm install vuex --save

# При использовании Vue 3.0 + Vuex 4.0 переход на 4 версию:
npm install vuex@next --save

Создаем в директории src директорию store. Внутри директории store создаем файл index.js со следующим содержимым

import { createStore } from 'vuex'

export default createStore({
  state: {
    counter: 10
  },
  getters:{
    getCount2(state){
      return state.counter * 2;
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

Необходимо подключить наш созданный store к проекту используя строку

import store from './store'

Итоговый код моего файла main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App)
    .use(store)
    .mount('#app')

После наши функции и переменные store становятся доступны в любом компоненте vue. Для вызова обращаемся:

// Обратится к геттеру
this.$store.getters.getCount2;

// Можно также обратится на прямую к переменной counter
this.$store.state.counter

Пример использования в компоненте App

<template>
  {{ getCount2 }}
</template>

<script>

export default {
  name: 'App',
  computed: {
    getCount2(){
      return this.$store.getters.getCount2;
    }
  }
}
</script>

Vuex — паттерн управления состоянием + библиотека для приложений на Vue.js. Он служит централизованным хранилищем данных для всех компонентов приложения с правилами, гарантирующими, что состояние может быть изменено только предсказуемым образом