Vuex

Five.Vuex

Vuex is a state management mode developed specifically for vue.js applications. Simply put, all variables that need to be shared by multiple components are stored in one object.

• 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, which provides advanced debugging functions such as zero-configuration time-travel debugging, status snapshot import and export, and so on.

1.1. Single-interface state management

1.2. Legend of Vuex Status Management

1.3. The core concept of Vuex

• State

  State Single State tree State: {count: 0}Copy the code

• Getters

  /* Just like evaluating properties, the return value of a getter is cached based on its dependencies, and is recalculated only if its dependencies change. Getters cannot pass arguments by default. If you want to pass arguments, you have to make getters return another function */
  
  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)
      }
    }
  })
  Copy the code

• Mutation

  The only way to update the store state of Vuex is to submit the Mutation. 2. A callback function (handler) whose first argument is state. Mutations are mutations. {increment(state){state-count ++}} increment(){this. code. store.mit ('increment')} When adding a new attribute to an object in state, update the data using the following method: Set (obj, 'newProp', 123) mode 2: The mind object reassigns the Mutation constant type to the old object -- the concept uses a constant to replace the type of the Mutation event. In general, the main reason not to do asynchronous mutation operations is because devTools can help us capture a snapshot of mutation when we use DevTools.Copy the code

• Action

  /* Action is similar to Mutation, but is used instead of Mutation to perform asynchronous operations. In the Vue component, if we call the method in the action, we need to use dispatch, which also supports passing payload */
  
  mutations: {
    increment(state){state.count++}},actions: {
    increment(context,payload) {
      setTimeout(() = >{
        context.commit('increment', payload)
      }, 3000)}}Copy the code

• Module

  /* Due to the use of a single state tree, all the application states are grouped into one large object. When the application becomes very complex, the Store object can become quite bloated. To solve these problems, 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 = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB
    }
  })
  
  store.state.a // -> moduleA status
  store.state.b // -> moduleB status
  Copy the code

1.4. Project structure

├─ index.html ├─ download.js ├─ API │ ├─ ├─ ├─Extract THE API request├ ─ ─ components │ ├ ─ ─ App. Vue │ └ ─ ─... └ ─ ─ store ├ ─ ─ index. Js# where we assemble modules and export store├ ─ ─ actions. JsRoot level action├ ─ ─ mutations. JsMutation at the root level└ ─ ─ modules ├ ─ ─ cart. Js# Shopping cart module└ ─ ─ products. Js# Product module
Copy the code