Vernacular vuex

Core: Single state tree: One app corresponds to one store.

Quickly understand the core points in VUEX

State

State: can be understood as the data inside data() (called this.$store.state). Vuex’s state storage is responsive, so you can read state in the Store in computed.

Const store = new vuex. store ({state: {count: 0, size: 10,}}) called in the component (assuming it has been injected into global vue.use (store)) computed: { count() { return this.$store.state.count } }Copy the code

The above is the method to obtain a state. If we want to obtain multiple states, we can use the auxiliary function mapState to help us generate calculated attributes, so that we do not need to declare multiple calculated attributes to obtain multiple states.

MapState import {mapState} from 'Vuex' // mapState returns an object. In order to mix it with local computed properties, So use object expansion to run the operator computed: {... MapState ({count: state => state.count, // pass string argument 'count' equal to 'state => state.count' countAlias: CountPlusLocalState (state) {return state.count + this.localcount}})}Copy the code

We can also pass mapState an array of strings when the name of the computed property of the map is the same as the name of the child node of State.

Computed: mapState([// map this.count to store.state.count 'count'])Copy the code

getters

If we want to do something with the state property in the store, we can use getters

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

How to access getters, via properties:

computed: { ... mapGetters([ }Copy the code

Reference: Vuex official website