vuex What is it? ?

      Specifically for vue Design of state management architecture , Unified management and maintenance vue Variable state of .

vuex The five core attributes of ?

      Five core concepts :state,getters,actions,mutations,modules

state

    state yes vuex Basic data of

    because vuex State storage is responsive , therefore vue Component from store The easiest way to get the state in is to write it in a calculated property

    By registering in the root instance  store  option , The store Instances are injected into all the child components under the root component , And the sub components can pass through the  this.$store  Visit to
const Counter = { template: `<div>{{ count }}</div>`, computed: { count () {
return this.$store.state.count } } }
mapState auxiliary function

When a component needs to obtain multiple states , Declaring these states as computed properties is a bit of a duplication and redundancy . In order to solve this problem , We can use it mapState
Auxiliary functions help us generate computational properties , Let you press the key a few times less .
// In the separately built version, the auxiliary function is Vuex.mapState import { mapState } from 'vuex' export default
{ // ... computed: mapState({ // Arrow functions make the code more concise count: state => state.count, //
Pass string parameter 'count' Equivalent to `state => state.count` countAlias: 'count', // In order to be able to use `this`
Get local state , Regular functions must be used countPlusLocalState (state) { return state.count +
this.localCount } }) } // Using object expanders ...mapState({ topNav: state =>
state.topNav.data, // take this.topNav Map to this.$store.topNav.data navigationInfo:
state => state.topNav.navigationInfo }),
Getters

        Vuex Allow us to be here store Defined in “getter”( It can be said that store Calculation properties of ). It's like calculating properties ,getter
The return value of is cached according to its dependency , And it is recalculated only when its dependency value changes .

       getters receive state As its first parameter , Accept others getters As the second parameter , If not required , The second parameter can be omitted in the following example :
const store = new Vuex.Store({ state: { count:0 }, getters: { // Single parameter
countDouble: function(state){ return state.count * 2 }, // Two parameters
countDoubleAndDouble: function(state, getters) { return getters.countDouble * 2
} } })
Access through properties

Getter Will be exposed as  store.getters  object , You can access these values in the form of properties :
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Access by method
getters: { // ... getTodoById: (state) => (id) => { return
state.todos.find(todo => todo.id === id) } } // Access by method
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
mapGetters  The auxiliary function is simply to store In getter Map to local computed properties :
import { mapGetters } from 'vuex' export default { // ... computed: { //
Use the object expansion operator to expand the getter Mix in computed Object ...mapGetters([ 'doneTodosCount',
'anotherGetter', // ... ]) } } mapGetters({ // hold `this.doneCount` Map to
`this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' })
Mutation

  change Vuex Of store The only way to change the state of is to commit mutation.

mutation It has to be synchronous , If you want to be asynchronous, you need to use action.

each mutation Has a string Event type (type) and One Callback function
(handler). This callback function is where we actually make the state change , And it will accept it state
As the first parameter , Submit the load as the second parameter .( The submitted load should be an object in most cases ), Submitted loads may also be omitted .
const store = new Vuex.Store({ state: { count: 1 }, mutations: { // No load submitted
increment(state) { state.count++ } // Submit load incrementN(state, obj) { state.count
+= obj.n } } }) // Call in component // No load submitted store.commit('increment') // Submit load
store.commit('incrementN', { n: 100 })
mapMutations auxiliary function
import { mapMutations } from 'vuex' export default { //.. methods: {
...mapMutations([ 'increment' // mapping this.increment() by
this.$store.commit('increment') ]), ...mapMutations({ add: 'increment' // mapping
this.add() by this.$store.commit('increment') }) } }
Action

Action be similar to mutation, The difference is that :

* Action Submitted mutation, Instead of changing state directly .
* Action Can contain any asynchronous operation . const store = new Vuex.Store({ state: { count: 0 },
mutations: { increment (state) { state.count++ } }, actions: { increment
(context) { context.commit('increment') } } })
be careful :Action Function accepts an and store Instances with the same methods and properties context object , So you can call context.commit Submit a
mutation, Or by context.state and context.getters To get state and getters.

       Action adopt  store.dispatch  Method trigger :
store.dispatch('increment')
mapActions auxiliary function

You use it in components  this.$store.dispatch('xxx')  distribute action, Or use  mapActions  The auxiliary function will change the methods
Map to  store.dispatch  call ( It needs to be injected at the root node first  store):
import { mapActions } from 'vuex' export default { //.. methods: {
...mapActions([ 'incrementN' // mapping this.incrementN() by
this.$store.dispatch('incrementN') ]), ...mapActions({ add: 'incrementN' // mapping
this.add() by this.$store.dispatch('incrementN') }) } }
Module 

Using a single state tree , It causes all the states of the application to concentrate on a large object . however , When the application gets big ,store The object will become bloated .

In order to solve the above problems ,Vuex Allow us to store Split into modules (module). Each module has its own
state,mutation,action,getters, Even nested submodules —— A similar segmentation is performed from top to bottom : 
import Vuex from 'vuex'; import topNav_store from "./topNav/store.js"; import
member_store from "./member/store.js"; import game_store from
"./coupon/game.js"; import approval from './approval/store.js' import
setRentInfo from './contract/store.js' export default new Vuex.Store({
modules:{ topNav:topNav_store, memberStore:member_store, game_store:game_store,
approval:approval, setRentInfo } })

Technology
©2020 ioDraw All rights reserved
Swing actual combat Understanding closure about vue in el-date-picker type=daterange The problem of date not echoing Ubuntu 18.04 swap Partition expansion Snake code --c Language Edition visual c++6.0 open 【Golang Basic series 10 】Go language On conditional sentences ifString class —— summary ,String The nature of , Memory resolution , Commonly used APIAdobe Illustrator Publish native support Apple Silicon Test version of the software study java My first class antd table sort