What is Vuex?

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

  • Multiple views depend on the same state.
  • Actions from different views need to change the same state.

For problem one, the method of passing parameters can be cumbersome for multi-layer nested components and does nothing to transfer state between sibling components.

For problem two, we often use parent-child components to reference directly or to change and synchronize multiple copies of state through events. These patterns are very fragile and often result in unmaintainable code.

Borrowed from Flux, Redux, and The Elm Architecture. Unlike other patterns, Vuex is a state management library designed specifically for vue.js to leverage the fine-grained data response mechanism of vue.js for efficient state updates.

If your application is simple, you might not want to use Vuex. A simple Store pattern is all you need. However, if you need to build a medium to large single-page application, and you’re probably thinking about how to better manage state outside of components, Vuex would be a natural choice.

store

It is mainly divided into five modules

  • State: Stores data

  • Getter: Method of getting the store property

  • Mutatuon: The only way to change the state in Vuex’s store is to commit mutation, similar to events.

  • Action: The action commits mutation rather than a direct state change.

  • Module:

  1. state
const state = {
  title: 'doubanMovie'./ / title
  movingList: {  / / list
    subjects: []
    },
  }
Copy the code
  1. Getter: can be thought of as the mapGetters helper function for the computed property of store
export const getters = {
  title: state= > {
    return state.title
  },
  movingList: state= > {
    for (let subject of state.movingList.subjects) {
      subject.rating.average = subject.rating.average / 2
    }
    return state.movingList
  }
}
Copy the code
  1. mutatuin

The only way to change the state in Vuex’s store is to commit mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make the state change, and it accepts state as the first argument: mutation is a synchronous transaction

import * as types from './types' // Constant class name
export const mutations = {
  [types.MOVING_TITLE] (state, {title}) {
    state.title = title
  },
  [types.MOVING_LIST] (state, {list}) {
    state.movingList = list
  },
}
Copy the code

Substituting constants for mutation event types is a common pattern in various Flux implementations.

  1. Action: action is similar to mutation, except that:
  • The Action commits mutation rather than a direct state change.
  • Actions can contain any asynchronous operation.
export const actions = {
  /** * get the list * @param commit */
  getMoving ({commit, state}) {
    utils.get('/movie/in_theaters', {city: state.city}).then(res= > {
      commit('MOVING_LIST', {list: res})
      commit('MOVING_LOADING', {loading: false}}})})Copy the code

Action triggered by store.dispatch(‘increment’)

  1. Module 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

Project structure (recommendation only)

  1. Application-level state should be centralized into a single Store object.

  2. Submitting mutation is the only way to change the state, and the process is synchronous.

  3. Asynchronous logic should be wrapped in actions.

For large applications, you may want to split Vuex related code into modules. Here is an example project structure:

├─ index.html ├─ download.js ├─ API │ ├─ ├─ ├─# abstractions for making API requests├ ─ ─ components │ ├ ─ ─ App. Vue │ └ ─ ─... └ ─ ─ store ├ ─ ─ index. Js# where we assemble modules and export the store├ ─ ─ actions. Js# root actions├ ─ ─ mutations. Js# root mutations└ ─ ─ modules ├ ─ ─ cart. Js# cart module└ ─ ─ products. Js# products module
Copy the code