This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Introduction to the

What is the

Vuex is a state management pattern + library 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 manner.

why

Here is a single data flow scenario (no data is shared) :In everyday development, we often encounter situations in which state sharing is used, especially when a component grows to the point where it needs to be broken down into different components. Naturally, there are many other scenarios where state sharing is required, such as a modification, where a corresponding change (such as header) is required, and so on.

Global variables can also be used for the above scenario, but because there is no management, it is easy to cause global pollution, control and other problems. It can also be implemented by borrowing Vue-bus, but is not suitable for complex scenarios. Thus, vuEX was born.

prompt

Don’t use small projects until you feel you need them.

Early experience

The installation

yarn add vuex@next --save
yarn add es6-promise
Copy the code

code

The createApp method returns a value, but the mount method does not. So the createApp method returns a value, and the mount method does not return a value. So the createApp method returns a value, and the mount method does not return a value. And then it defines a mutation called Increment, which defines the method of changing state. This happens because the state inside the store cannot be changed from the outside.

import { createApp } from 'vue' import App from './App.vue' import { createStore } from 'vuex' const store = createStore({ state(){ return { count: 0 } }, mutations: { increment(state) { state.count++; }}}); const app = createApp(App); app.use(store); app.mount('#app');Copy the code

App.vue Because the store was created earlier, it defines a mutation called increment, which is used directly from this.store.com MIT (‘increment’); Trigger the execution of Increment using the Commit method of store.

<template> < button@click ="click"> </template> <script> export default {name: 'App', methods: { click () { this.$store.commit('increment'); console.log(this.$store.state.count) }, }, } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

‘

Although the purpose of vuex is similar to redux, and the behavior is similar, personally, VUex is relatively easy to use.

The core concept

The core concept

  • The state (mapState)
  • getter
  • mutaion
  • action
  • module

A small example of the first four core concepts makes it easy to see how they work: main.js

app.vue

Vuex is very user-friendly, defining state, mutations, actions, getters in the Store, and then reading the value of state (State, getters, mapState) in the component. When a state change needs to be triggered, it can be modified using commit mutation or, if asynchronous, using dispatch Action. Of course this is written in a file, an application store is placed in a file, far away from the components, or is not good for understanding the program. So vuex also provides a Module way to split a store into multiple modules and then merge it into a single store. Each module has its own state,actions,mutations, etc.

By using a single state tree, all the state of the application is concentrated into one large object. When the application becomes very complex, the Store object can become quite bloated.

To solve this problem, Vuex allows us to split the store into modules. Each module has its own state, mutation, action, getter, and even nested submodules — split the same way from top to bottom

const moduleA = {
  state: () = >({... }),mutations: {... },actions: {... },getters: {... }}const moduleB = {
  state: () = >({... }),mutations: {... },actions: {... }}const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA status
store.state.b // -> moduleB status
Copy the code

The sample

main.js

app.vue