一、index.js

import global from './modules/globalModule'
export {
    global
}

二、mutation-types.js

export const SET_TITLE = 'SET_TITLE'

// 底部栏切换状态
export const CHANGE_ACTIVE = 'CHANGE_ACTIVE'

// 首页时间切换状态
export const TOGGLE_TIME = 'TOGGLE_TIME'

// 购物车
export const CHANGE_TOTAL = 'CHANGE_TOTAL'

三、globalModule.js

import * as types from '../mutation-types'

const state = {
title: '享购优品',
num: 5,
todos: [
    { id: 1, text: '...', done: true },
    { id: 2, text: '...', done: false }
    ]
}

const getters = {
    doneTodos: state => {
        return (state.num += 1)
    },
    getTodoById: (state, getters) => (id) => {
        return state.todos.find(todo => todo.id === id)
    },
    doubleCount (state) {
        let double = state.num * 2
        console.log(double)
        return double
    }
}

const actions = {
    // increment (context) {
    //   context.commit('increment')
    // }
    increment ({ commit }) {
        commit('increment')
    },
    incrementAsync ({ commit }) {
        setTimeout(function () {
            commit('increment')
        }, 1000)
    },
    actionA ({ commit }) {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                commit('SET_TITLE')
                resolve()
            }, 1000)
        })
    },
    actionB ({ dispatch, commit }) {
        return dispatch('actionA').then(function () {
            commit('SET_TITLE')
        })
    }
}

const mutations = {
    [types.SET_TITLE] (state, title) {
        state.title = title
    },
    increment (state) {
        state.num++
        console.log(state.num)
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

四、List.vue

<template>
  <div>
    <!-- {{$route.params}} -->
    <div v-if="isCommon">
      {{$route.params.isCommon}}
        <list-common></list-common>
    </div>
    <div v-else>
      {{$route.params.isCommon}}
        <list-maker></list-maker>
    </div>
  </div>
</template>
<script>
  import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from 'vux'
  import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
  import * as types from '../../stores/mutation-types'
  import ListCommon from '../../containers/Product/ListCommon'
  import ListMaker from '../../containers/Product/ListMaker'
  export default {
    components: {
      Tab,
      TabItem,
      Sticky,
      Divider,
      XButton,
      Swiper,
      SwiperItem,
      ListCommon,
      ListMaker
    },
    created () {
      this.SET_TITLE('（类别／品牌）')
      // console.log(this.doneTodos)
      // console.log(this.$store.state.global.num)
      // console.log(this.$store.getters.doneTodos)
      // this.$store.commit('increment')
      // this.increment()
      // this.$store.dispatch('increment')
      // this.incrementAsync()
      // this.$store.dispatch('actionA').then(function () {
      //   console.log(123)
      // })
      // this.actionA().then(function () {
      //   console.log(123)
      // })
      // this.doubleCount
      // this.$store.getters.doubleCount
    },
    methods: {
      ...mapMutations([
        types.SET_TITLE,
        'increment'
      ]),
      ...mapActions([
        'incrementAsync',
        'actionA'
      ]),
      onItemClick (index) {
        // console.log('on item click:', index)
      }
    },
    computed: {
      // localComputed () { /* ... */ },
      // // 使用对象展开运算符将此对象混入到外部对象中
      // ...mapState({
      //   // ...
      //   number: state => state.global.num
      // })
      ...mapState({
        numbers: state => state.global.num
      }),
      ...mapGetters([
        'doneTodos',
        'getTodoById',
        'doubleCount'
      ])
    },
    data () {
      return {
        isCommon: true,
        status: 2
      }
    }
  }
</script>

<style>
  .list-index{
    margin-top: 0px;
  }
</style>