Global state management Vuex

Status manager: Redux vuex Flux…

The installation

  1. npm install vuex@next
  // ./store/index
  import { createStore } from 'vuex'

  const store = createStore({
    // Pass a function like data
    state() { 
      return {
        counter: 3}},mutations: {
      increment(state, payload){ state.counter ++; }}});export default store;


  // main.js
  import store from '@/store'
  app.use(store)
Copy the code

Module is introduced

  • mutations

The only way to modify state

  • actions

  • state

  • getters

  • modules

Modules includes the previous modules

{
  state: () = > ({}),

  mutations: {
    myMutations(state, payload) {}
    Store.com MIT ({type: 'myMutations', name: 'CQC'}), store.com MIT ({type: 'myMutations', name: 'CQC'}) */
  },

  actions: {
    myActions(ctx, payload) {
      const { commit, dispatch, state, getters, rootState, rootGetters } = ctx;

      // Can have a return value
      return new Promise((resolve, reject) = > {
        setTimeout(() = > {
          resolve({name: 'cqc'}) // dispatch('myActions', payload).then(...)
        }, 200)})/* setup() { const store = useStore(); . const { myActions } = mapActions(['myActions']); myActions.call({ $store: store, payload}) ... Store.dispatch ('myActions', {name: 'CQC'}) store.dispatch({type: 'myActions', name: 'CQC'})} */}},getters: {
    // store.getters.myGetters
    myGetters(state, getters, rootState, rootGetters){}},modeles: {
    moduleA: {  // store.state.a
      namespaced: true,
      state,  
      mutations,
      actions,  // dispatch('moduleA/xxx')
      getters: {
        / / in the module}}}}Copy the code

MapState use (opintion API)

import {
  mapState,  // Map to state computed

  mapGetters,  / / map getters computed using mapGetters ([' key ']) | | mapGetters ({newKey: key})

  mapMutations,  Mutations methods are used as mapGetters
  mapActions,  // Map actions methods (mapGetters

} from 'vuex'

{
  computed: {
    // Get the contents of state in an array. mapState( ['counter'  // the key in state is then accessed directly by this.counter]),// Object notation (properties can be renamed). mapState( {// This. SCounter is accessed after passing a callback function
        sCounter: state= > state.counter
      }
    )
  }
}
Copy the code

MapState usage (composition Api)

import { computed } from 'vue';
import { mapState, useStore } from 'vuex; { setup() { const store = useStore(); const storeStateGets = mapState( { myName: state => state.name, myCounter: state => state.counter } ); const storeState = {}; Object.keys(storeStateGets).map(key => { const getFn = storeStateGets[key].bind({ $store: store }); storeState[key] = computed(getFn); }); return { ... storeState } } }Copy the code

Modules use


// store
const moduleA = {
  namespaced: true.// Not setting true will merge the contents of moduleA into root. (There is no way to tell which module the attribute is from, and it may cause conflicts with the attribute.)

  state: () = > ({
    myName: 'I am moduleA'
  }),

  mutations: {
    increment(){... }},actions: {
    incrementAsync(){... },// Call the method in root
    useRootMutation(ctx) {
      const { commit } = ctx;
      const payload = 0;

      commit('resetCounter', payload, { root: true})}}} {state: () = > ({
    counter: 100,}).mutations: {
    resetCounter(state, n){ state.counter = n; }},modules: {
    moduleA
  }
}

// ----------------


// Use (namespaced: true)
// optionApi
{
  methods: {
    btnClick() {
      this.$store.state.moduleA.myName;  // Obtain the state of moduleA
      this.$store.getters['moduleA/getName'];  // Getters for moduleA
      this.$store.commit('moduleA/increment');  // Perform the module, resulting in the mutations method
      this.$store.dispatch('moduleA/incrementAsync');  // Execute the actions method for this module


      this.$store.dispatch('moduleA/useRootMutation');  // Execute the root module method under this module}}}// Helper functions in modules
import { mapMutations, createNamespacedHelpers } from 'vuex';

const { mapMutations: helperMapMutations } = createNamespacedHelpers('moduleA');

// Option Api (composition Api)
{
  methods: {
    btnClick() {
      / / write 1
      this.moduleAIncrement(payload);

      / / write 2
      this['moduleA/increment'](payload);

      / / writing 3
      this.increment(payload);

      / / write 4
      this.helperIncrement(payload)
    },
    
    / / write 1. mapMutations({moduleAIncrement: 'moduleA/increment'
    }),
    
    / / write 2. mapMutations( ['moduleA/increment']),// Write method 3 (feel this convenient). mapMutations('moduleA'['increment']  // Array and object are acceptable
    ),

    / / write 4. helperMapMutations( {helperIncrement: 'increment'}}})// ----------------------------
Copy the code