四刷Vuex

store文件代码

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "这是一个name",
    age: "这是一个age"
  },
  getters: {
    getName(state, getters) {
      return state.name;
    },
    getAge(state, getters) {
      return state.age.replace("age", "");
    },
    getNameAndAge(state, getters) {
      return `${getters.getName}${getters.getAge}`;
    },
    getObj(state, getters) {
      return state.obj;
    }
  },
  mutations: {
    setName(state, { name }) {
      state.name = name;
      console.log(state.name);
    },
    setAge(state, age) {
      state.age = age;
    },
    setObj(state, options) {
      state.obj = {};
    }
  },
  actions: {
    handleCommitSetName({ commit, state }) {
      commit("setName", { name: "是的, 真棒" });
    }
  }
});

vue单文件测试vuex快捷map组合 

import { mapState } from "vuex";
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
import { mapActions } from "vuex";
import { commonLink } from "./index";
export default {
  name: "",
  components: { commonLink }, // commonlink common-link
  props: {},
  data() {
    return {
      msg: "HelloWorld",
      niu: "龙哥 厉害啊",
      isShow: true
    };
  },
  computed: {
    ...mapState({
      age: "age",
      name: state => state.age,
      // 不可以使用箭头函数 因为这里的this会是Store
      stateName: state => {
        return state.name + this.age;
      }
    }),
    ...mapGetters(["getName", "getAge", "getNameAndAge", "getObj"])
  },
  watch: {},
  beforeCreate() {},
  created() {
    // this.$store.commit("setName", { name: "不是吧" });
    // this.$set(this.$store.state, "obj", { height: 160 });
    // this.$store.commit("setObj");
    this.$store.dispatch("handleCommitSetName");
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {}
};