vuex详解

##1.首先在main.js中引入

import store from './store/index.js'

new Vue({ el: '#app', router, store, components: { App }, template: '' })

##2.然后在main.js同级建立store文件夹

在store文件夹里面分别建立actions.js, getters.js, index.js, mutations.js,types.js

比如现在需求在组件A控制组件B中的一个状态的显隐。

在组件A中

<script>
import {mapGetters, mapActions} from 'vuex';
	data() {
		return {
			

		}
	},
    methods: {
        //点击弹出
        ...mapActions([
            'buyPop'
        ]),
    }
</script>

1.触发后进入store中的index文件 index文件中的内容是固定的：

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


Vue.use(Vuex);


import mutations from './mutations'
import actions from './actions'
import getters from './getters'


export default new Vuex.Store({
	modules:{
		mutations
    },
    actions,
});

*2.然后进入actions里面

import * as types from './types'


export default {
    //点击弹出付款弹出层
    buyPop:({
        commit
    }) => {
        commit(types.BUYPOP)
    }
}

*3.然后维护下types文件

export const BUYPOP = 'BUYPOP';

然后到了mutations文件

import {
    BUYPOP,
} from './types'
import getters from './getters'


const state = {
    cpShow:false,  //控制付款弹出层展示隐藏
};


const mutations = {
    //底部购买组件出现弹出付钱板块
    [BUYPOP](state) {
        state.cpShow = true;
    },


};
export default {
	state,
	mutations,
	getters
}

然后进入getters文件

const getters = {
	//获取弹出层状态
	cpShow(state) {
		return state.cpShow
    },
}


export default getters;

然后store文件就处理完毕了，那么在B组件中怎么调用呢？

着啥急，这不就来了嘛。。

B组件：

<template>
	<div>
			<div v-show="cpShow">被控制的木偶</div>
    </div>
</template>


<script>
import {mapGetters, mapActions} from 'vuex';
export default {
    data() {
        return {
                                    
        };
    },
    computed:{
        ...mapGetters({
                cpShow:'cpShow'
	   })


    },
    methods: {


    }
};
</script>




//调用时候可以直接this.cpShow
写法嘛很多种：
        ...mapGetters({
                cpShow:'cpShow'
	   })
	   
	   或者
	           ...mapGetters([
	            'cpShow'
	   ])
	   都在可以

这就是一个完整的使用流程喽！

加群加群微信搜索qdleader，回复加群

github中每日也更新 github https://github.com/qdleader/qdleader