1. The concept:
Vue plug-in is dedicated to achieve centralized state (data) management in Vue. It centrally manages (read/write) the state shared by multiple components in Vue applications. It is also a common way between components and is suitable for communication between any components
2. Usage Scenarios:
- Multiple components depend on the same state
- Behavior from different components needs to change the same state
3. Schematic diagram
Vuex has three important components (all managed by the Store) :
State: Used to hold data (data cannot be modified directly)
Actions: Used in response to component Actions
Mutations: used to manipulate data
4. Build: VUEX environment
① Installation: NPM I Vuex
SRC /store/index.js
③ Introduce dependency:
(1)
Import Vue from 'Vue' import vuex from 'vuex' import vuex from 'vuex' import vuex from 'vuex' import vuex from 'vuex' import vuex from 'vuex' import vuex from 'vuex' import vuex Open mutations object const mutations = {} // Open mutations state object const state = {} // create and expose store export default new vuex.store ({// Short for object) Actions, mutatlons, state})Copy the code(2) Pass the store configuration item when creating the VM in main.js
// create vm new Vue({el: '#app', render:h =>h(app), store})Copy the codeBasic use
1. Initialize data, configure actions, configure mutations, and operate the file store.js
In order to distinguish easily: in general, the methods of actions are all lowercase, and the methods of mutations are all uppercase
// Import Vue from 'Vue' // import Vuex import Vuex from 'Vuex' // Use Vuex vuue. Ues (Vuex) const actions = {// respond to actions in components Jia (context,value){//console.log(' jia in actions was called ') context.com MIT (' jia ',value)}, Open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization = open embolization } // create and expose store export default new vuex. store ({actions, mutations, state,})Copy the code$store.state.sum; $store.state.sum
$store.dispath(‘actions method name ‘, data) or $store.mit (‘mutations method name ‘, data)
If there is no network request or other business logic, the component can skip actions, that is, write dispath and commit directly
6. The use of getters
Usage scenario: When the data in state needs to be processed for reuse, getters can be used for processing
Usage:
1. Append the getters configuration to store.js
. Const getters ={bigSum(state){return state.sum*10}} store export default new vuex.store ({... getters })Copy the code- Reading data from a component:
$store.getters.bigSum
7. Use of four MAP methods
Use scenario: too much trouble rendering data
Solutions:
First: can be configured in calculated properties (also troublesome)
import {mapState} from 'vuex'
1. MapState method: used to help us map the data in state to calculated properties
Computed :{// Generate computed attributes with mapState (object notation)... MapState ({sum:'sum',school:'school',subject:'subject'}), mapState(['sum','school','subject']), }Copy the code2. MapGetters method: used to help us map the data in getters to calculated properties
Computed :{// Generate computed attributes with mapGetters (object notation)... MapGetters ({bigSum:'bigSum'}), // Use mapState to generate calculation attributes... mapGetters(['bigSum']), }Copy the code3. MapActions method: a method to help us generate a dialogue with actions, i.e. a function containing $store.dispath(XXX)
Methods :{// incrementOdd, incrementWait... MapActions ({incrementOdd:'jiaOdd',incermentWait:'jiaWait'}) mapActions(['jiaOdd','jiaWait']) }Copy the code4. MapMutations method: a method used to help us generate the mutations dialogue, that is, a function containing $store.mit (XXX)
Methods :{// Generated by mapMutations, increment, decrement... Rearrangements ({alteration :'JIA', Decrement :'JIAN'}) mapMutations(['JIA','JIAN']) }Copy the codeWhen using mapActions and mapMutations, if parameters need to be passed: Parameters need to be passed when events are bound in the template; otherwise, parameters are event objects
8. Vuex modular
1. Purpose: Vuex emphasizes the use of a single state tree, that is, there is only one store in a project, which centrally manages all the data in the project and the operations on the data. The problem with this, however, is that the store can be very bloated and difficult to maintain, so you need to modularize the state tree — making the code more maintainable and the multiple data categories more explicit.
2. Usage:
(1) to modify store. Js
Const countAbout ={namespaced:true, open the namespace state:{x:1}, mutations:{... }, actions:{}, Getters :{bigSum(state){return state.sum*10}}} const personAbout ={namespaced:true,// state:{... }, mutations:{... }, actions:{}, } const store =new Vuex.Store({ modules:{ countAbout, personAbout } })Copy the code(2)
After the namespace is enabled, state data is read from the component
/ / a: directly read this. $store. State. PersonAbout. List / / second way: with the help of mapState alone take:... mapState('countAbout',['sum','school','subject'])Copy the codeAfter the namespace is enabled, getters data is read from the component
/ / a: directly read this. $store. The getters [' personAbout/firstPersonName '] / / way two, with the help of mapGetters read... mapGetters('countAbout',['bigSum'])Copy the codeAfter the namespace is enabled, Dispatch is called in the component
/ / a: direct dispatch this. $store. Dispatch (' personAbout/addPersonWang 'person) / / second way: with the help of mapActions... mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})Copy the codeAfter the namespace is enabled, commit is called in the component
Use new rows to commit this. codestore.com MIT ('person ',person) mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),Copy the code