一、普通模式

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={   //全局对象
     show: true,
     num:0, 
};
const getters = {   //实时监听state值的变化(类似computed)
    isShow(state) {  
       return state.show
    },
    getNum(){ 
       return state.num
    }
};
const mutations = {
    shows(state) {   //自定义改变state初始值的方法
        state.show= true;
    },
    hide(state) { 
        state.show = false;
    },
    setNum(state,sum){   //可传额外的参数(变量或对象)
       state.num+=sum;
    }
};
const actions = {  //action方法 可以包含任意异步操作
    onShow(context) {   //context与store 实例具有相同方法和属性
        context.commit('shows');
    },
    offShow(context) { 
        context.commit('hide');
    },
    changeNum(context,num){   //num为要变化的形参
        context.commit('setNum',num)
    }
};
const store =  ()=> new Vuex.Store({state,getters,mutations,actions});
export default store;

<template>
  <div id="app">
    <button @click="shows">show</button>
    <button @click="hide">hide</button>
    <button @click="set">set</button>
    <div v-if="show">{{num}}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed:{
     show(){
        return this.$store.state.show;
      },
      num(){
        return this.$store.state.num;
      }
  },
  methods:{
      shows(){
        this.$store.dispatch('onShow')
      },
      hide(){
        this.$store.dispatch('offShow')
      },
      set(){
        this.$store.dispatch('changeNum',1)
      },
  }
}
</script>

二、模块模式

import Vue from 'vue';
import Vuex from 'vuex';
import filter from './filter';
Vue.use(Vuex);
const store = () => new Vuex.Store({
  state: {
  },
  mutations: {
  },
  modules: {
    filter
  }
});
export default store

//filter.js
const state = {
  show: true,
  num: 123
};
const getters = {
  isShow(state) {
    return state.show
  },
  getNum() {
    return state.num
  }
};
const mutations = {
  shows(state) {   //自定义改变state初始值的方法
    state.show= true;
  },
  hide(state) {
    state.show = false;
  },
  setNum(state,sum){   //可传额外的参数(变量或对象)
    state.num+=sum;
  }
};
const actions = {
  onShow(context) {   //context与store 实例具有相同方法和属性
    context.commit('shows');
  },
  offShow(context) {
    context.commit('hide');
  },
  changeNum(context,num){   //num为要变化的形参
    context.commit('setNum',num)
  }
};
export default {
  namespaced: true,   // 引入getter、actions、mutations需加上模块名
  state,
  getters,
  actions,
  mutations
};

<template>
  <div id="app">
    <button @click="shows">show</button>
    <button @click="hide">hide</button>
    <button @click="set">set</button>
    <div v-if="show" style="color: red">{{num}}</div>
  </div>
</template>

<script>
  export default {
    computed: {
      show() {
        return this.$store.state.filter.show;
      },
      num() {
        return this.$store.state.filter.num;
      }
    },
    methods: {
      shows() {
        this.$store.dispatch('filter/onShow')
      },
      hide() {
        this.$store.dispatch('filter/offShow')
      },
      set() {
        this.$store.dispatch('filter/changeNum', 1)
      },
    }
  }
</script>

三、动态注入模块

this.$store.registerModule(id,{
  state, getters, mutations, actions 
})

四、其它应用

mapState、mapGetters

computed: {
  // 对象方式入参(可自定义映射变量)
  ...mapState({
    a: state => state.a 
  }),
  // 数组方式入参
  ...mapState([
    'b'
  ]),
  //模块状态(同样分对象和数组传参)
  ...mapState({
    a: state => state.moduleName.a 
  }),
  //指定模块
  ...mapState('moduleName',{
    a: state => state.a 
  }),
}

mapActions、mapMutations

methods: {
    ...mapMutations([
      'a'
    ]),
    ...mapMutations({
      b: 'b'
    })
}

引用时指定模块

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')