It’s official: Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool devTools Extension (Opens New Window), providing advanced debugging functions such as zero-configuration time-travel debugging and state snapshot import and export.

When should YOU use Vuex?

Vuex can bring me great convenience in managing the shared state and enhance the maintainability of the project. Therefore, since Vuex is so good, does it mean that it must be used? I think if you have a simple app it’s probably best not to use it, but if you have a huge project Vuex can really help, so it depends on the project you’re working on, not just for the sake of using it.

This article covers only state and getters in Vuex

state

Official Documentation

Data stored in Vuex follows the same rules as data in Vue instances. In fact, state is similar to a shared container, each component share the contents of the container, in simple terms, is the global state container.

Vuex provides a mechanism to “inject” state from the root component into each child component through the Store option (calling vue.use (Vuex)), since my project was created using Vite and vue3. The introduction is as follows:

  1. Create a store folder in the SRC directory
  2. Create index.js in store folder (name is not fixed)
  3. The contents of the index.js folder are as follows: index.js
  4. Mount globally in main.js
import store from './store/index.js'
const app = createApp(App);

app.use(store);
app.mount('#app');
Copy the code

State Usage Demo (Simple counter case)

// template
<button @click="add"> was clicked {{this. $store. State. The count}} time < / button >// js
// If you want to change state, use mutations(which will be discussed in the next article)
add() {
	this.$store.commit('increment');
}
Copy the code

index.js

import {
    createStore
} from 'vuex';

export default createStore({
    state() {
        return {
            count: 20.todos: [{id: 1.text: '... '.done: true
                },
                {
                    id: 2.text: '... '.done: false}]}},mutations: {
        increment(state){ state.count++; }}});Copy the code

getters

Getters can be thought of as a computed property of state, and the return value of the getter is cached based on its dependency and recalculated only if its dependency value changes.

Three kinds of use

You can accept state as its first argument

doneTodos: state= > {
   return state.todos.filter(todo= >todo.done); qi },Copy the code

You can also accept other getters as a second argument

doneTodosCount: (state, getters) = > {
   return getters.doneTodos.length;
},
Copy the code

To pass parameters to the getter by returning a function through the getter

getTodoById: (state) = > (id) = > {
   return state.todos.find(todo= > todo.id === id);
}
Copy the code

conclusion

After a preliminary understanding of Vuex, we know its usage scenarios and related basic usage. I think any technology is so, when choosing a technology should be based on their actual demand to choice of the project, rather than choose any technology advanced technology, of course, the introduction of this at least the most shallow, if you want to vuex have a deeper understanding, we also need to read its source code, learning, a long way to go.