vuex 简单入门State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。 mapGetters辅助函数仅仅

vuex是什么

运用到了js设计模式中的单例模式，单例模式想要做到的是，不管我们尝试去创建多少次，它都只给你返回第一次所创建的那唯一的一个实例。

主要包括以下几个模块：
- State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
- Getter：允许组件从 Store 中获取数据，个人觉着可以它充当着过滤数据的作用
- mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
- Mutation：是唯一更改 store中状态的方法，且必须是同步函数。
- Action：用于提交mutation，而不是直接变更状态，可以包含任意异步操作。
- Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

vuex怎么去使用

以下我们分为单模块和多模块进行讲解

单模块

store->index

点击查看

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 全局 modules
export default new Vuex.Store({
  state:{
    count: 1,
  },
  getters:{
    getCount: state => {
      return state.count * 10;
    }
  },
  mutations:{
    add(state) {
      state.count++
    },
    reduce(state) {
      state.count--
    }
  },
  actions:{
    addActions: ({ commit }) => {
      commit('add')
    },
    reduceActions: ({ commit }) => {
      commit('reduce')
    }
  }
})

index.vue

点击查看

<template lang="html">
<div>
  <div class="a">
    <div>
      page   {{count}}
    </div>
    <div>
      getCount  {{getCount}} 
    </div>
    <button type="button" name="button" @click="add">增加</button>
    <button type="button" name="button" @click="reduce">删减</button>
  </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["getCount"]),
  },
  methods: { 
    ...mapMutations(["add", "reduce"]),
    ...mapActions(["addActions", "reduceActions"])
  }
};
</script>

多模块

store->modules->a

点击查看

const state = {
  countA: 1
}
const mutations = {
  addA(state) {
    state.countA++
  },
  reduceA(state) {
    state.countA--
  }
}
const actions = {
  addA: ({ commit }) => {
    commit('addA')
  },
  reduceA: ({ commit }) => {
    commit('reduceA')
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

store->modules->b

点击查看

const state = {
    countB: 1
}
const mutations = {
    addB(state) {
        state.countB++
    },
    reduceB(state) {
        state.countB--
    }
}
const actions = {
    addB: ({ commit }) => {
        commit('addB')
    },
    reduceB: ({ commit }) => {
        commit('reduceB')
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

store->index

点击查看

import Vue from 'vue'
import Vuex from 'vuex'
import countA from './modules/a'
import countB from './modules/b'
Vue.use(Vuex)

// 全局 modules
export default new Vuex.Store({
  modules: {
    countA,
    countB,
  }
})

vue

<template lang="html">
<div>
  <div class="a">
    page a  {{$store.state.countA.countA}}
    <button type="button" name="button" @click="addA">A增加</button>
    <button type="button" name="button" @click="reduceA">A删减</button>
  </div>
  <div class="b">
    page b  {{countB}}
    <button type="button" name="button" @click="addB">B增加</button>
    <button type="button" name="button" @click="reduceB">B删减</button>
  </div>
  </div>
</template>

<script>
import { mapState,mapActions } from "vuex";
export default {
  computed: {
    ...mapState("countA", ["countA"]),
    ...mapState("countB", ["countB"]),
  },
  methods: { 
    ...mapActions("countA", ["addA", "reduceA"]),
    ...mapActions("countB", ["addB", "reduceB"])
  }
};
</script>

最后附上本人参考的github

https://github.com/evenyao/vuex-modulesStore