vuex的使用

1.不使用命名空间  store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    count: 0
}
const mutations = {
    increment(state) {
        state.count++
    },
    multiply(state, value) {
        state.count = state.count * value
    }
}
const actions = {
    syncIncrement({ commit, state }) {
        setTimeout(() => {
            commit('increment')
        }, 1000)
    },
    syncMultiply(context, value) {
        setTimeout(() => {
            context.commit('multiply', value)
        }, 500)
    }
}

const getters = {
    doneTodos(state) {
        return state.count * 99
    }
}
const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

export default store

在组件中使用

 <template>
  <div>
    <h1>vuex: {{ num }}</h1>
    <h2>getters{{ add99 }}</h2>
    <button @click="increment">num++</button>
    <button @click="syncIncrement">异步num++</button>
    <button @click="multiply(3)">乘法</button>
    <button @click="syncMultiply(3)">异步乘法</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({ num: "count" }),
    ...mapGetters({ add99: "doneTodos" }),
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(["increment", "multiply"]),
    ...mapActions(["syncIncrement", "syncMultiply"]),
  },
};
</script>

<style scoped lang="scss"></style>

2.使用命名空间 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const moduleA = {
    namespaced: true,  //开启namespace:true，该模块就成为命名空间模块了
    state: {
        count: 10,
        countA: 888
    },
    mutations: {
        increment(state) {
            state.count++
        },
        multiply(state, value) {
            state.count = state.count * value
        }
    },
    actions: {
        syncIncrement({ commit, state }) {
            setTimeout(() => {
                commit('increment')
            }, 800)
        },
        syncMultiply(context, value) {
            setTimeout(() => {
                context.commit('multiply', value)
            }, 500)
        }
    },
    getters: {
        doneTodos(state) {
            return state.count * 99
        }
    },
}


const store = new Vuex.Store({
    modules: {
        moduleA
    }
})

export default store

在组件中使用

<template>
  <div>
    <h1>vuex命名空间</h1>
    <h5>state{{ count }}</h5>
    <p>getters:{{ doneTodos }}</p>
    <button @click="upincrement">修改</button>
    <button @click="mapmultiply(2)">修改*2</button>
    <button @click="syncIncrement(2)">异步修改*2</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("moduleA", ["count"]),
    // 共有三种方式，如下：
    //1.
    commonGetter() {
      this.$store.getters["moduleA/doneTodos"];
    },
    //2.
    ...mapGetters("moduleA", ["doneTodos"]),
    // 此处的moduleA，不是以前缀的形式出现！！！
    //3.别名状态下
    ...mapGetters({
      paramGetter: "moduleA/doneTodos",
    }),
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations({
      upincrement: "moduleA/increment",
      mapmultiply: "moduleA/multiply",
    }),
    ...mapActions("moduleA", ["syncIncrement"]),
  },
};
</script>

<style scoped lang="scss"></style>