Vue family bucket of --Vuex

What Vuex that?

Vuex is a specially developed for Vue.js application state management. It uses the status of all components centralized storage management application, and a corresponding state rules to ensure a predictable manner changed. Vuex Vue is also integrated into the official commissioning tool devtools extension, provides a time-travel, such as zero-configuration debugging, a snapshot of the state of import and export and other advanced debugging features

 

 

• It relies on the same state of the plurality of views.
• Behavior needs to be changed from the different views of the same state.

For a problem, a method for parameter passing nested components will be very tedious, and the inability to transfer state between brothers assembly.

For question two, we often adopt his son or components directly to change the references and multiple copies synchronized state by events. More of these models are very vulnerable, often results in code that can not be maintained.

Draws Flux, Redux and The Elm Architecture. It is different from the other modes, Vuex Vue.js designed specifically for state management database to fine-grained data Vue.js response mechanism to efficiently use the status update.

 

 

If your application is simple enough, you do not use Vuex. A simple model is sufficient to store you need a. However, if you need to build in a large single-page application, you are likely to consider how to better manage the component outside the state, Vuex will be the natural choice.

store

It is divided into five modules

• state: storing data

• getter: get store property method

• mutatuon: The only way to change Vuex the store in the state is to submit a mutation, similar events.

• action: Action submitting a mutation, rather than directly change state.

• module: Modular

1. state

const state = {
  title: 'doubanMovie', // 标题
  movingList: {  // 列表 subjects: [] }, } 复制代码

2. getter: attribute store can be considered to calculate the mapGetters Helper

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 } } 复制代码

3. mutatuin

Change Vuex the store the only way a state is to submit a mutation. Vuex the mutation very similar to: Event Type (type) of each mutation has a string and a callback function (handler). The callback function is where we actually change the status, and it will accept the state as the first parameter: mutation are synchronized Affairs

import * as types from './types' //常量 类名 export const mutations = { [types.MOVING_TITLE] (state, {title}) { state.title = title }, [types.MOVING_LIST] (state, {list}) { state.movingList = list }, } 复制代码

Use constant substitution mutation event types in a variety of Flux implementations are very common pattern.

4. action: Action similar mutation, except that:

• Action is submitted mutation, rather than directly change state.
• Action can contain any asynchronous operation.

export const actions = {
  /**
   * 获取列表
   * @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}) }) } } 复制代码

Action triggered by store.dispatch methods: distribution store.dispatch('increment')

5. module Vuex allow us to store into module (module). Each module has its own state, mutation, action, getter, even nested sub-module - split from top to bottom the same way:

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 的状态 store.state.b // -> moduleB 的状态 复制代码

Project structure (but recommended)

1. State of the application hierarchy to be focused on a single object store.

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

3. Asynchronous logic should be encapsulated into action inside.

For large applications, you will want to Vuex relevant code is divided into modules. Here is an example project:

├── index.html
├── main.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

Author: Happy Health o o
link: https: //juejin.im/post/5ceb85f1e51d4556db69498d
Source: Nuggets