store 例子

—store文件夹------
index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import order from './modules/order'
import activity from './modules/activity'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    order,
    activity
  },
  getters
})

export default store

getters.js

const getters = {
    sidebar: state => state.app.sidebar,
    device: state => state.app.device,
    avatar: state => state.user.avatar,
    name: state => state.user.name,
    logouturl: state => state.user.logouturl,
    homeurl: state => state.user.homeurl,
    companyname: state => state.user.companyname,
    tabName: state => state.order.tabName,
    tabName: state => state.activity.tabName
};
export default getters;

--------store\modules文件夹--------

import Cookies from 'js-cookie'

const state = {
  sidebar: {
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  },
  device: 'desktop'
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

activity.js

const state = {
    tabName: 0
};

const mutations = {
    SET_NAME: (state, tabName) => {
        state.tabName = tabName;
    }
};

const actions = {
  tabName({ commit }, { tabName }) {
    console.log('tabName:',tabName);
    commit('SET_NAME', tabName)
  }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions
};

order.js

const state = {
    tabName: 0
};

const mutations = {
    SET_NAME: (state, tabName) => {
        state.tabName = tabName;
    }
};

const actions = {
  tabName({ commit }, { tabName }) {
    console.log('tabName:',tabName);
    commit('SET_NAME', tabName)
  }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions
};

user.js

import { getInfo } from "@/api/user";

const state = {
    name: "",
    avatar: "",
    logouturl: "",
    homeurl: "",
    companyname:""
};

const mutations = {
    SET_NAME: (state, name) => {
        state.name = name;
    },
    SET_AVATAR: (state, avatar) => {
        state.avatar = avatar;
    },
    SET_LOGOUTURL: (state, logouturl) => {
        state.logouturl = logouturl;
    },
    SET_HOMEURL: (state, homeurl) => {
        state.homeurl = homeurl;
    },
    SET_COMPANYNAME: (state, companyname) => {
        state.companyname = companyname;
    }
};

const actions = {
    // get user info
    getInfo({ commit, state }) {
        return new Promise((resolve, reject) => {
            getInfo()
                .then(response => {
                    const data = response.return_data;

                    const avatar = data.wx_logo;
                    const name = data.loginname;
                    const logouturl = data.logouturl;
                    const homeurl = data.homeurl;
                    const companyname = data.companyname;

                    commit("SET_NAME", name);
                    commit("SET_AVATAR", avatar);
                    commit("SET_LOGOUTURL", logouturl);
                    commit("SET_HOMEURL", homeurl);
                    commit("SET_COMPANYNAME", companyname);

                    resolve(data);
                })
                .catch(error => {
                    reject(error);
                });
        });
    }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions
};

settings.js

import defaultSettings from '@/settings'

const { showSettings, fixedHeader, sidebarLogo } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

页面上用法例如：

  created(){
     this.$store.dispatch('user/getInfo')
  }

 methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false });
    }
 }

  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    }
  }

获取store储存的数据用于渲染：

    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <!-- <breadcrumb class="breadcrumb-container" /> -->
    <div class="outer-link">
       <a :href="homeurl"><span>返回系统首页</span></a>
       <span @click="showMiniCode" >访问小程序</span>
       <a href="http://help.weixin12315.com/news/114-1-64.html" target="_blank"><span>新手指引</span></a>
    </div>
    <div class="right-menu">
      <div  class="logout">
        <a :href="logouturl" ><i class="icon iconfont icon-logout"></i></a>
      </div>
      <div class="info">

        <div class="face">
          <div class="avatar-bg"></div>
         <img :src="avatar"/>
        </div>
        <span>{{name}}</span>
      </div>



import { mapGetters } from 'vuex'

  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'logouturl',
      'homeurl'
    ])
  },