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.

Status management mode

State, the data source that drives the application;

View, to declaratively map state to the view;

Actions, in response to changes in state caused by user input on the view.

The simplicity of one-way data flow can easily be broken when our application encounters state shared by multiple components:

Multiple views depend on the same state.

Different views need to change the same state.

Therefore, the state management mode is to extract the shared state and manage it uniformly in a global place. Behavior can be triggered and state retrieved regardless of where the component is located, improving code maintainability.

Simple principle

Vue Components: Vue Components.

Dispatch: is the only method that can execute an action.

Actions: Triggered by component Dispatch. The mutation call is then triggered by commit(), updating the state.

Commit: State changes commit operation method. Committing for mutation is the only way to perform mutation.

Mutations: A state change operation, triggered by the COMMIT (‘mutation name ‘) in actions. This method can only perform synchronous operations, and the method name must be globally unique.

State: page state management container object.

Practice – City selection

Implement a common city selection page. Contains home page and city selection page.

Create a new IndexPage.vue

// IndexPage.vue
 
<template>
  <div>{{city}}</div>
</template>

<script>
  import { mapState} from 'vuex'

  export default {
    name: "IndexPage", computed: { ... mapState(['city'])
    }
  }
</script>
Copy the code

Create a new citypage.vue

// citypage. vue <template> <div> <p> Current city: {{city}}</p> <div v-for="Item of [' Beijing ',' Shanghai ',' Guangzhou ']" :key="item">
    <button @click="handleChangeCity(item)"
    >{{item}}
    </button>
  </div>
</div>
</template>

<script>
  import { mapState ,mapMutations  } from 'vuex'

  export default {
    name: "CityPage", computed: { ... mapState(['city']) }, methods: { ... mapMutations(['changeCity']),
      handleChangeCity (city) {
        this.changeCity(city)
      },
    },
  }
</script>
Copy the code

Add these two pages to app.vue.

//  App.vue

<template>
  <div>
    <IndexPage/>
    -----------
    <CityPage/>
  </div>
</template>

<script>
import IndexPage from './pages/IndexPage'
import CityPage from './pages/CityPage'

export default {
  name: 'App',
  components: {
    IndexPage,
    CityPage
  }
}
</script>
Copy the code

The next important thing is to create a store folder in SRC (which you would already have if you were scaffolding it).

Create a new index.js folder in the Store folder and don’t forget to inject it into main.js.

//  index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  actions,
  mutations
})
Copy the code

Create a new state.js file

//  state.js

let defaultCity = 'the country'

try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {
}

export default {
  city: defaultCity
}
Copy the code

Create a new actions.js

// actions.js

export default {
  changeCity (context, city) {
    context.commit('changeCity', city)
  }
}
Copy the code

Create a new twims.js

// mutations.js

export default {
  changeCity (state, city) {
    state.city = city
    try {
      localStorage.city = city
    } catch (e) {
    }
  }
}
Copy the code

After completion, the picture is shown below. When selecting a new city, the city in the home page and city selection page will be updated simultaneously.