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

柔光的暖阳◎ 2022-01-21 08:35 138阅读 0赞

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>