Based on some

The installation

npm i vuex --save
Copy the code

A simple introduction

  • state
    • Save the data
  • mutations
    • Modify data – synchronization, simple logic
  • actions
    • Complex logic – Asynchronous, complex logic

Project reference

Create a store. Js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

let store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {}})export default store;
Copy the code

In the main. Js references

import store from './store.js';

new Vue({
  store,
  render: h= > h(App),
}).$mount('#app')
Copy the code

Use in component

  • Basic method

One is used directly in template: cmp.vue

{{ $store.state.xxx }}
Copy the code

One is used in Vue instances:

this.store.state.xxx
Copy the code
  • mapping
mapState()
mapMutations()
mapActions()
Copy the code
<script> import { mapState, mapMutations, mapActions } export default { computed: { ... mapState(['a']) }, methods: { ... mapMutations([]), ... mapActions([]) } } </script>Copy the code

The parameter can be {} except for [], which is used to take aliases

mapState({
    stateA: 'a'
})
Copy the code

A little further…

getters

If you’re getting data, you can just use state, but why getters? Getters can be used to do some logical processing, such as checking whether the user is logged in, id 0 is not logged in… The advantage is that you can write a method directly in getters to determine whether to log in or not, instead of each person implementing a method themselves

store.js

getters: {
    a(state) {
        return state.a
    }
}
Copy the code

Use:

  • Direct use of
{{ $store.getters.a }}
Copy the code
  • mapping
<script> import { mapGetters } export default { computed: { ... mapGetters(['a']) } } </script>Copy the code

modules

Vuex is used to divide Vuex into blocks, such as one for users and one for news…

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

let store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        a: {
            state: {
                a: 12
            },
            mutations: {
                setA(state, payload) {
                    state.a = payload
                }
            },
            actions: {}... }}})export default store;
Copy the code

Module A is called A, and state in vuex also has an A. This overwrites the existing vuex. If you want the module name in vuex, you can use a namespace to avoid this problem. Avoid modifying a variable in one module while also modifying a variable in another module with the same name:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

let store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
            user: { / / the name
            // Here is the new namespace
            namespaced:true.state: {
                a: 12
            },
            mutations: {
                setA(state, payload) {
                    state.a = payload
                }
            },
            actions: {}... }}})export default store;
Copy the code
  • use
{{$store.commit('user/setA', 123)}}
Copy the code