VUEX summary

What is Vuex?

　　vuex is a specially developed for Vue.js application state management. He states of all the components using centralized storage management application, and a corresponding state rules to ensure a predictable manner transformation occurs

　　VUEX does not limit your code structure, however, he sets out some rules need to be followed:

　　　　1. Apply state level should be focused into a single object store

　　　　2. Submit mutation is the only way to change the state, and this process is synchronous

　　　　3. The asynchronous logic should be encapsulated into action inside

　　Before using the first installation

　　　　1. Installation vuex npm install vuex --save in the vue-cli

　　　　2. Create a new file name in the src directory to store the folder, and to facilitate the introduction of a new content store index.js folder as follows

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

　　　　3. Next main.js introduced inside the store and then look at the overall injection, so that this can be used in each component of $ store.;

import store from './store'//引入store
 
new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

　　Finished installing the next entry to the topic

　　The STATE state is only a single application of a state tree for each Store, which state storage state, the state data of all the components considered for packet data storage of all components common

{State = const 
        the tableHeader: [], the header data table // 
        tableData: [], // the content data table 
    }

　　mapstate helper functions when a component wants to get multiple states, each state are declared to calculate attribute some duplication, so use it to help me generate mapstate calculate property

// use mapstate

computed: { 
　　... mapState ([ 
	// header data table 
        "the tableHeader", 
        // data table of contents 
	"TableData" 
　　]), 
},

　GETTERS 　 getters computed properties of all the components, the return value getters are cached according to his dependence, and is recalculated after his dependent change in value

　Mutations mutations Store in methods, mutations changed data object holds the callback function type, the first parameter is the state, the second argument is a load payload, which is custom parameters, call mutaions callback function can only be used store.commit (type, payload)

{mutations = const 
        // Get Header Data 
        [type.GET_HEADER_DATA] (State, Data) { 
            state.tableHeader = Data;     
        }, 
        // acquiring volume data table 
        [type.GET_TABLE_DATA] (State, Data) { 
            state.tableData = Data;   
        }, 
    }

　　Instead of using a constant Mutation type of event, but must be referenced in the store.js

//mutations.js 
　　Export = const GET_TABLE_DATA "GET_TABLE_DATA" // get the list of data 
　　export const GET_HEADER_DATA = "GET_HEADER_DATA" // get the list of header data 
//store.js 
　　Import * AS of the type from '../store/mutions-types '

　　Submit mutation in the assembly may be used in this assembly. $ Store.commit ( 'xxx') submitted mutation, or use an auxiliary function mapMutation assembly methods require injection mapped store.commit call in store root

import { mapMutations } from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations([
      'GET_TABLE_DATA', // 将 `this.increment()` 映射为 `this.$store.commit('increment')
　　]}
  }
}

　The ACTION action is similar except that the mutation is a mutation submitted action, rather than directly to change the status, action may comprise an asynchronous operation

const actions = {
        // 获取表格头部数据
        getTableHeader:function({commit, state}){
           return api.getTableHeader().then(res =>{
               commit(type.GET_HEADER_DATA,res.data.Model.headList)
            })
            .catch((error)=>{
                alert('error')
            })
        },
        // 获取表格体
        getTableData:function({commit,state}){
            return api.getTableData().then(res=>{
                // console.log(res)
                commit(type.GET_TABLE_DATA,res.data.Model.list)
            })
        },
}

　　Distribution action triggered by store.dispatch method but can also be used to map the method mapAction helper component to store.dispatch call (need to inject a store at the root node)

methods:{
    getTableHeader(){
       this.$store.dispatch("users/getTableHeader").then(()=>{
        this.tableHeader=this.$store.state.users.tableHeader
       })
    }
}
----------------------------或者----------------------------------
methods: {
	...mapActions([
		//  表头数据
		"getTableHeader",
		]),
}

　　The MODULES modules into the store module (modules) for each module has its own state, mutation, action, getter, or even a nested block - from top to bottom is divided in the same manner

Guess you like