vuex

What is vuex?

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It integrates well with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.

What are vuex's main functionalities?

State Management

Vuex allows you to define a centralized state for your application and mutate this state in a controlled way using mutations.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
});

store.commit('increment');
console.log(store.state.count); // 1

Getters

Getters are like computed properties for stores. They can be used to compute derived state based on store state and are cached.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

console.log(store.getters.doneTodos); // [{ id: 1, text: '...', done: true }]

Actions

Actions are similar to mutations, but instead of mutating the state, actions commit mutations. Actions can contain arbitrary asynchronous operations.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload.amount;
    }
  },
  actions: {
    incrementAsync({ commit }, payload) {
      setTimeout(() => {
        commit('increment', payload);
      }, 1000);
    }
  }
});

store.dispatch('incrementAsync', { amount: 10 });

Modules

Vuex allows you to divide your store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules.

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

Other packages similar to vuex

redux

Redux is a predictable state container for JavaScript apps, often used with React but can be used with any other JavaScript framework or library. It is similar to Vuex but has a different ecosystem and middleware support.

mobx

MobX is a state management library that is not restricted to React like Redux and provides a more flexible approach to state management based on observable data structures.

ngxs

NGXS is a state management pattern + library for Angular applications. It provides a similar centralized state management system to Vuex but is designed specifically for Angular's ecosystem.

akita

Akita is a state management pattern + library for Angular and React. It focuses on simplicity and sets up a store for managing the state of your application with less boilerplate than Redux or NGXS.

README

Vuex 4

This is the Vue 3 compatible version of Vuex. The focus is compatibility, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code with Vue 3.

Status: Beta

All Vuex 3 features work. There are a few breaking changes described in a later section, so please check them out. You can find basic usage with both option and Composition API in the example directory.

Feedback is welcome should you discover any issues. You may use vue-next-webpack-preview to test out Vue 3 with Vuex 4.

Breaking changes

Installation process has changed

To align with the new Vue 3 initialization process, the installation process of Vuex has changed.

To create a new store instance, users are now encouraged to use the newly introduced createStore function.

import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

Whilst this is not technically a breaking change, you may still use the new Store(...) syntax, we recommend this approach to align with Vue 3 and Vue Router Next.

To install Vuex to a Vue instance, pass the store instance instead of Vuex.

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

const app = createApp(App)

app.use(store)

app.mount('#app')

Bundles are now aligned with Vue 3

The following bundles are generated to align with Vue 3 bundles:

• vuex.global(.prod).js
  • For direct use with <script src="..."> in the browser. Exposes the Vuex global.
  • Global build is built as IIFE, and not UMD, and is only meant for direct use with <script src="...">.
  • Contains hard-coded prod/dev branches and the prod build is pre-minified. Use the .prod.js files for production.
• vuex.esm-browser(.prod).js
  • For use with native ES module imports (including module supporting browsers via <script type="module">.
• vuex.esm-bundler.js
  • For use with bundlers such as webpack, rollup and parcel.
  • Leaves prod/dev branches with process.env.NODE_ENV guards (must be replaced by bundler).
  • Does not ship minified builds (to be done together with the rest of the code after bundling).
• vuex.cjs.js
  • For use in Node.js server-side rendering with require().

Typings for ComponentCustomProperties

Vuex 4 removes its global typings for this.$store within Vue Component to solve issue #994. When used with TypeScript, you must declare your own module augmentation.

Place the following code in your project to allow this.$store to be typed correctly:

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // Declare your own store states.
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

createLogger function is exported from the core module

In Vuex 3, createLogger function was exported from vuex/dist/logger but it's now included in the core package. You should import the function directly from vuex package.

import { createLogger } from 'vuex'

TODOs as of 4.0.0-beta.2

• Update docs

Changelog

4.0.0-beta.4 (2020-06-29)

Bug Fixes

• types: add missing logger.d.ts file to the package (#1789) (a477334)
• warn when unregistering non existing module (#1786) (7cec79d)