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.
Vuex
:fire: HEADS UP! You're currently looking at Vuex 4 branch. If you're looking for Vuex 3, please check out dev
branch.
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 also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
Learn more about Vuex at "What is Vuex?", or get started by looking into full documentation.
Documentation
To check out docs, visit vuex.vuejs.org.
Examples
You may find example applications built with Vuex under the examples
directory.
Running the examples:
$ npm install
$ npm run dev
Questions
For questions and support please use the Discord chat server or the official forum. The issue list of this repo is exclusively for bug reports and feature requests.
Issues
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Changelog
Detailed changes for each release are documented in the release notes.
Stay In Touch
For latest releases and announcements, follow on Twitter: @vuejs.
Contribution
Please make sure to read the Contributing Guide before making a pull request.
License
MIT
Copyright (c) 2015-present Evan You