vuex—5仿select使用vuex(划分模块)

store/index.js

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

Vue.use(Vuex)

let selectModule = {
  state:{
    title:'hello123',
    list: []
  },
  mutations:{
    changeTitle(state, payload){
      state.title = payload.title
    },
    changeList(state, list){
      state.list = list;
    }
  },
  actions:{
    getListAction({commit}){
      // 发送请求
      axios.get('http://easy-mock.com/mock/594f5d4b9adc231f3569be76/list/list')
        .then((data)=>{
          commit("changeList", data.data);  // 拿到数据后，提交mutations，改变状态
        })
        .catch((error)=>{
          conso.log(error)
        })
    }
  }
};

// this.$store.state.title
// this.$store.state.selectModule.title

// 定义一个容器

let store = new Vuex.Store({
    state: {
      count: 100
    },
    getters: {
      filterCount(state){
        return state.count >= 120 ? 120 : state.count;
      }
    },
    mutations: {
       addIncrement(state, payload){
         state.count += payload.n;
       },
      deIncrement(state, payload){
        state.count -= payload.de;
      }
    },
   actions: {
      addAction({commit,dispatch}){
        setTimeout(()=>{
            // 改变状态，提交mutations
            commit("addIncrement", {n:5})
            dispatch("textAction", {test: '测试'})
        },1000)
      },
    textAction(context, obj){
        console.log(obj)
    }
  },
    modules:{
      selectModule
    }
})

export default store

list.vue

<template>
    <ul class="list">
      <li v-for="item in data" @click="getTitleHandle(item.title)">{{item.title}}</li>
    </ul>
</template>

<script>
export default {
  computed:{
      data(){
          return this.$store.state.selectModule.list;
      }
  },
  methods:{
    getTitleHandle(title){
      // 改变vuex中状态
      this.$store.commit("changeTitle", {title})
    }
  },
  created(){
      // 获取数据
    this.$store.dispatch('getListAction')
  }
}
</script>

select.vue

<template>
    <section class="warp">
      <div class="searchIpt clearFix">
        <select-input :is-show.sync="listShow"></select-input>
        <list v-show="listShow"></list>
      </div>
    </section>
</template>

<script>

import selectInput from '@/components/selectInput'
import list from '@/components/list'


export default {
  data(){
      return {
        listShow: false
      }
  },
  methods: {
  },
  components: {
    selectInput,
    list
  }
}
</script>

selectInput.vue

<template>
    <div class="clearFix">
      <input
        readonly='readonly'
        class="keyWord"
        @click="showListHandle"
        :value="title"
      />
      <input type="button" value="GO">
      <span></span>
    </div>
</template>

<script>

export default {
    props:['isShow'],
  computed:{
    initShow(){
        return this.isShow
    },
    title(){
        return this.$store.state.selectModule.title
    }
  },
  methods: {
    showListHandle(){
        this.$emit("update:isShow", !this.initShow)
    }
  }
}
</script>