Vuex的使用

1.Vuex的使用

安装下载：

npm install vuex --save

在src下建立store文件夹>index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//定义数据
const state = {
  show:false
};
//修改数据的方法
const mutations = {
  changeShow(state){
    state.show = true
  }
};
//抛出
export default new Vuex.Store({
  state,
  mutations
})

在组件中使用

<template>
	<div @click="gohome" v-show="isshow">222</div> //是否显示由isshow决定
</template>
<script>
    import { mapState } from 'vuex'  //从仓库引入数据
    import { mapMutations } from 'vuex'  //从仓库引入修改方法
    export default {
        methods:{
          gohome(){
            this.changeShow(); //调用修改数据的方法修改仓库中的数据
          },
          ...mapMutations(['changeShow']), //修改数据的方法必须从methods引入且带括号属于函数
        },
        computed:{
            isshow (){ //定义方法变量来使用数据仓库的数据
              let a = this.$store.state.show;
              return a;
            },
            ...mapState['show'] //调用数据仓库的数据
          }
      }
</script>