vuex案例

App.vue

<template>
  <div>
    <Count />
    <Person />
  </div>
</template>

<script>
import Count from "./components/Count.vue";
import Person from "./components/Person.vue";

export default {
  components: {
    Count,
    Person,
  },
};
</script>

<style>
</style>

Count.vue

<template>
  <div>
    <h2>当前的和为:{{ sum }}</h2>
    <h5>放大后的和为:{{ dSum }}</h5>

    <h4>Person组件的总人数为:{{ count }}</h4>
    <h3>我在{{ school }}学习{{ subject }}</h3>
    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="ADDNUM(num)">+</button>
    <button @click="SUBNUM(num)">-</button>
    <button @click="OddNum(num)">当前和为奇数再加</button>
    <button @click="delay(num)">等一等再加</button>
  </div>
</template>

<script>
// 映射状态
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      num: 1, //选择的数字
    };
  },
  methods: {
    // ...mapMutations("sumOptions", ["ADDNUM", "SUBNUM"]),
    ...mapMutations("sumOptions", { ADDNUM: "ADDNUM", SUBNUM: "SUBNUM" }),

    ...mapActions("sumOptions", ["OddNum", "delay"]),
  },
  computed: {
    ...mapState("sumOptions", ["sum", "school", "subject"]),
    ...mapState("personOptions", ["dataList"]),

    ...mapGetters("sumOptions", ["dSum"]),
    ...mapGetters("personOptions", ["count"]),
  },
};
</script>

<style>
</style>

Person.vue

<template>
  <div>
    <h3>Count组件的和为:{{ sum }}</h3>
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入姓名" v-model="name" />
    <button @click="addP">添加</button>
    <button @click="addW">添加王姓的人</button>
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
    <p>此人姓：{{ firstName }}</p>
    <p>总人数：{{ count }}</p>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
// import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    /* ...mapState("personOptions", ["dataList"]),
    ...mapState("sumOptions", ["sum"]),
    ...mapGetters("personOptions", ["count",'firstName']), */
    dataList() {
      return this.$store.state.personOptions.dataList;
    },
    sum() {
      return this.$store.state.sumOptions.sum;
    },
    // 访问getters里面的数据方式有点特殊
    count() {
      return this.$store.getters["personOptions/count"];
    },
    firstName() {
      return this.$store.getters["personOptions/firstName"];
    },
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    // ...mapMutations("personOptions", ["ADDPERSON"]),
    addP() {
      const obj = {
        id: nanoid(),
        name: this.name,
      };
      // this.ADDPERSON(obj);
      this.$store.commit("personOptions/ADDPERSON", obj);
      this.name = "";
    },
    addW() {
      const obj = {
        id: nanoid(),
        name: this.name,
      };
      this.$store.dispatch("personOptions/addPerson", obj);
      this.name = "";
    },
  },
};
</script>

<style>
</style>

Count.js

export default {
    // 命名空间
    namespaced: true,
    state: {
        sum: 0, //和
        school: 'XXX学院',
        subject: '前端',
    },
    getters: {
        dSum(state) {
            return state.sum * 10
        }
    },
    mutations: {
        ADDNUM(state, val) {
            state.sum += val
        },
        SUBNUM(state, val) {
            state.sum -= val
        },
    },
    actions: {
        OddNum(context, val) {
            if (context.state.sum % 2) {
                context.commit('ADDNUM', val)
            }
        },
        delay(context, val) {
            setTimeout(() => {
                context.commit('ADDNUM', val)
            }, 500);
        }
    }
};

Person.js

export default {
    namespaced: true,
    state: {
        dataList: [
            { id: '01', name: '张三' },
            { id: '02', name: '李四' }
        ]
    },
    getters: {
        count(state) {
            return state.dataList.length
        },
        firstName(state) {
            return state.dataList[0].name.slice(0, 1)
        }
    },
    mutations: {
        ADDPERSON(state, val) {
            state.dataList.unshift(val)
        }
    },
    actions: {
        addPerson(context, val) {
            if (val.name.indexOf('王') === 0) {
                context.commit('ADDPERSON', val)
            } else {
                alert('添加的不是王姓')
            }
        }
    }
}

Index.js

// store
// 引入vuex、vue
import Vuex from 'vuex'
import Vue from 'vue'
import personOptions from "./Person"
import sumOptions from "./Count"

// 使用vuex
Vue.use(Vuex);

/* // 准备actions——用于响应组件中的动作
const actions = {
    OddNum(context, val) {
        if (context.state.sum % 2) {
            context.commit('ADDNUM', val)
        }
    },
    delay(context, val) {
        setTimeout(() => {
            context.commit('ADDNUM', val)
        }, 500);
    }
};
// 准备mutations——用于操作数据(state)
const mutations = {
    ADDNUM(state, val) {
        state.sum += val
    },
    SUBNUM(state, val) {
        state.sum -= val
    },
    ADDPERSON(state, val) {
        state.dataList.unshift(val)
    }
};
// 准备state——用于存储数据
const state = {
    sum: 0, //和
    school: 'XXX学院',
    subject: '前端',
    dataList: [
        { id: '01', name: '张三' },
        { id: '02', name: '李四' }
    ]
};
// 准备getters——用于将state中的数据进行加工处理,相当于vue中的computed计算属性
const getters = {
    dSum(state) {
        return state.sum * 10
    }
}; */

// 求和功能相关的配置
/* const sumOptions = {
    // 命名空间
    namespaced: true,
    state: {
        sum: 0, //和
        school: 'XXX学院',
        subject: '前端',
    },
    getters: {
        dSum(state) {
            return state.sum * 10
        }
    },
    mutations: {
        ADDNUM(state, val) {
            state.sum += val
        },
        SUBNUM(state, val) {
            state.sum -= val
        },
    },
    actions: {
        OddNum(context, val) {
            if (context.state.sum % 2) {
                context.commit('ADDNUM', val)
            }
        },
        delay(context, val) {
            setTimeout(() => {
                context.commit('ADDNUM', val)
            }, 500);
        }
    }
}; */
// 与人员功能相关的配置
/* const personOptions = {
    namespaced: true,
    state: {
        dataList: [
            { id: '01', name: '张三' },
            { id: '02', name: '李四' }
        ]
    },
    getters: {
        count(state) {
            return state.dataList.length
        },
        firstName(state) {
            return state.dataList[0].name.slice(0, 1)
        }
    },
    mutations: {
        ADDPERSON(state, val) {
            state.dataList.unshift(val)
        }
    },
    actions: {
        addPerson(context, val) {
            if (val.name.indexOf('王') === 0) {
                context.commit('ADDPERSON', val)
            } else {
                alert('添加的不是王姓')
            }
        }
    }
} */


// 创建并导出vuex
export default new Vuex.Store({
    /*  actions,
     mutations,
     state,
     getters */
    //  模块
    modules: {
        sumOptions: sumOptions,
        personOptions: personOptions
    }
})