vuex相关笔记

一个模块中的配置

const state = {
    top_bar_menu: false,
    oldApi: 'http://fawmall.test.vcyber.com/mobile',
    newApi: 'http://fawmall.test.vcyber.com/pointMobile',
    webUrl: 'http://fawmall.test.vcyber.com/point',
    location: {
        lng: '',
        lat: '',
        status: 0
    },
    arr:[1,2,2,3,4]
};

const getters = {
    test(state){
        return state.arr.length
    }
};

const mutations = {
    top_bar_menu_show(state, payload) {
        state.top_bar_menu = payload;
    },
    locate_data(state, payload) {
        state.location = payload;
    }
};

const actions = {};

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

将各个模块引入集中

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

Vue.use(Vuex);

import config from './config'
import shop from './shop'

export default new Vuex.Store({
    modules: {
        config: config,
        shop: shop
    }
})

如何调取state

computed:{
    //方式一
    arr(){
        return this.$store.state.config.arr;
    }
    //方式二，同时引入多个
    ...mapState({
        oldApi: state => state.config.oldApi,
        newApi: state => state.config.newApi,
        webUrl: state => state.config.webUrl
    }),
    //方式三，简化
    ...mapState('config/',{
        oldApi: state => state.oldApi,
        newApi: state => state.newApi,
        webUrl: state => state.webUrl
     }),
    //方式四，如果计算属性和state子节点名称一样，可以简化
    ...mapState('config/',[
        'oldApi',
        'newApi',
        'webUrl'
    ]),
}

如何引入getters

computed:{
    //普通引入方式
    test2(){
        return this.$store.getters['config/test2'];
    }
    //方式二，同时引入多个
    ...mapGetters('config/',{
        test:'test',
        test3:'test3'
    })
}