Vuex基础使用 & Vuex 监听数据/值2021-04-29

需求：
1：头部导航栏中'XXXX'标题栏，显示下拉菜单
2：选中下拉菜单数据，将数据回显到页面指定位置
3：点击回显处数据，调用接口，并请求数据，将数据回显

由于 头部标题栏，回显数据位置，以及点击回显后调用接口都不在同一个vue文件内，所以使用到了Vuex

上代码：

// 动态头部导航栏
// 样式我就不写了，大家根据自己需求调一下
// 显示下拉菜单.vue  自己取名字哈
<template>
<!-- 1：头部导航栏中'XXXX'标题栏，显示下拉菜单，选中后隐藏 -->
    <div id="headerMenu">
        <div class="headerData">
            <div class="card"
                @click="change(item,index)"
                v-for="(index,item) in fliterheaderData"
                :key="index"
            >
                <span>{{item.name}}</span>
            </div>
            <div class="selectData" v-show="showSelectFlag">
                <ul>
                    <li
                    @click="selectItem(item,index)"
                    v-for="(index,item) in selectData"
                    :key="index">{{item.name}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        fliterheaderData:[{name:'标题1',id:1},{name:'标题2',id:2},{name:'标题3',id:3}],
        selectData:[{name:'选项1',id:1},{name:'选项2',id:2},{name:'选项3',id:3}]
        },
    methods: {
        //提交下拉框数据
        selectItem(item,index){
            this.$store.commit('SET_SELECT',item.name);
            //如果需求和我一样，选中之后，下拉框就关闭
            this.showSelectFlag = false
        }
    },
}
</script>

// vuex-----index.js页面 名字随便取
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        selectDataItem:""
    },
    mutations:{
        SET_SELECT(state,selectDataItem){
            state.selectDataItem = selectDataItem
        }
    },
    actions:{
        stateSelect({commit},selectDataItem){
            commit('SET_SELECT',selectDataItem)
        }
    }
})

//选中下拉菜单数据，将数据回显到页面指定位置
// 2.vue
<template>
  <div>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in selectList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
 import {mapActions} from 'vuex'
export default {
    computed:{
        selectList(){
            // 因为我的需求，回显的位置，除了选中的数据，还有两个内容（回显的位置是一个下拉框）
            let selectArr = [this.$store.state.selectDataItem,"数据1","数据2"]
            selectArr.concat(this.oldArr)
            return selectArr

        }
    },
  data() {
    return {
        oldArr:[]
    };
  },
  methods: {
      ...mapActions(['selectDataItem'])
  },
};
</script>

到上面为止，数据就显示成功了;
下面是额外的需求，一般情况下用不到

// 点击回显处数据，调用接口，并请求数据，将得到的数据渲染
//首先，回显数据的位置是下拉框第一个 是不会变的
//所以首先根据下标判断位置
if(index === 0){
  //判断选中的回显数据是哪个
  if(this.$store.state.selectDataItem === '选项1'){
    //调用接口
  }
 if(this.$store.state.selectDataItem === '选项2'){
    //调用接口
  }
 if(this.$store.state.selectDataItem === '选项3'){
    //调用接口
  }
}

希望对小伙伴们有些帮助，明天就是五一了，祝大家，节日愉快~