Basic Analysis of Vuex

1. What is Vuex?
Vuex is a mechanism for realizing the global state (data) management of components, which can facilitate the sharing of data between components.
Simple Application Server
USD1.00 New User Coupon
* Only 3,000 coupons available.
* Each new user can only get one coupon(except users from distributors).
* The coupon is valid for 30 days from the date of receipt.

2. The benefits of using Vuex to manage state uniformly
Ability to centrally manage shared data in vuex, easy to develop and maintain
Able to efficiently realize the direct data sharing of components and improve development efficiency
The data stored in vuex is responsive and can synchronize the data with the page
3. What kind of data is stored in Vuex
In general, only the data shared between components need to be stored in vuex, and the private data of the component can still be stored in its own data.

4. Download and use Vuex
download

npm install vuex -S //S stands for production environment use

Import vuex package
This is imported in main.js

import Vuex from'vuex'
Vue.use(Vuex)

Create store object

const store = new Vuex.Store({
state:{count:0} //The data stored in the state is global shared data
})

Mount the store object to the vue instance

new Vue({
el:"#app",
render:h => h(app), //render app and components
router, //Mount routing
store
})

5. The core concept of Vuex
State
Mutation
Action
Getter
State: Provide a unique public data source, all shared data must be unified in the State of the Store for storage

// Create a store data source and provide unique public data
const store = new Vuex.Store({
state:{count:0}
})

Mutations: Mutations are how to change the logic of the state in the state. The only way to change the state in Vuex is to submit a mutation, which is store.commit(‘increment’).

actions: Because mutations can only be synchronous operations, but in actual projects, there will be asynchronous operations, then actions are set for asynchronous operations. In this way, it becomes to submit the mutation in the action, and then submit the action in the methods of the component. It's just that the dispatch function is used when submitting actions, while the commit function is used for mutations.

Getter: Sometimes we need to derive some state from the state in the store, such as filtering and counting the list. At this time, getters can be used. Getters can be regarded as a calculated attribute of store, and its parameter is state.

const store = new Vuex.Store({
  state: {
    todos: [
      {id: 1, text:'reading', done: true},
      {id: 2, text:'playBastketball', done: false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});