跟着尚硅谷学vue2—进阶版4.0—Vuex2.0

原创 于 2024-11-13 01:36:16 发布 · 460 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

6. 基本使用

  1. 初始化数据、配置actions、配置mutations，操作文件store.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
   jia(context,value){
      // console.log('actions中的jia被调用了',miniStore,value)
      context.commit('JIA',value)
   },
}

const mutations = {
    //执行加
   JIA(state,value){
      // console.log('mutations中的JIA被调用了',state,value)
      state.sum += value
   }
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state,
})

  2. 组件中读取vuex中的数据：$store.state.sum

  3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

    备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

核心代码
store/index.js
// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

// 准备actions——用于相应组件中的动作
const actions = {
    // jia(context, value) {
    //     console.log('actions中的jia被调用了', context, value);
    //     context.commit('JIA', value)
    // },
    // jian(context, value) {
    //     console.log('actions中的jian被调用了', context, value);
    //     context.commit('JIAN', value)
    // },
    jiaOdd(context, value) {
        console.log('actions中的jiaOdd被调用了', context, value);
        // console.log('处理了一些事情--jiaOdd');
        // context.dispatch('demo1', value)
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    // demo1(context, value) {
    //     console.log('处理了一些事情--demo1');
    //     context.dispatch('demo2', value)
    // },
    // demo2(context, value) {
    //     console.log('处理了一些事情--demo2');
    //     if (context.state.sum % 2) {
    //         context.commit('JIA', value)
    //     }
    // },
    jiaWait(context, value) {
        console.log('actions中的jiaWait被调用了', context, value);
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },
}
// 准备 mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutations中的JIA被调用了', state, value);
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了', state, value);
        state.sum -= value
    }
}
// 准备 state——用于储存数据
const state = {
    sum: 0, // 当前的和
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
7. getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

  2. 在store.js中追加getters配置

    ......

const getters = {
   bigSum(state){
      return state.sum * 10
   }
}

//创建并暴露store
export default new Vuex.Store({
   ......
   getters
})

  3. 组件中读取数据：$store.getters.bigSum

核心代码
1. store/index.js
// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

// 准备actions——用于相应组件中的动作
const actions = {
    // jia(context, value) {
    //     console.log('actions中的jia被调用了', context, value);
    //     context.commit('JIA', value)
    // },
    // jian(context, value) {
    //     console.log('actions中的jian被调用了', context, value);
    //     context.commit('JIAN', value)
    // },
    jiaOdd(context, value) {
        console.log('actions中的jiaOdd被调用了', context, value);
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        console.log('actions中的jiaWait被调用了', context, value);
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },
}
// 准备 mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutations中的JIA被调用了', state, value);
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了', state, value);
        state.sum -= value
    }
}
// 准备 state——用于储存数据
const state = {
    sum: 0, // 当前的和
}
// 准备 getters——用于将 state 中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
2. Count.vue
<template>
  <div>
    <h1>当前求和为：{{ $store.state.sum }}</h1>
    <h3>当前求和放大10倍为：{{ $store.getters.bigSum }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数据
    };
  },
  mounted() {
    console.log("Count", this.$store);
  },
  methods: {
    increment() {
      // this.$store.dispatch("jia", this.n);
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      // this.$store.dispatch("jian", this.n);
      this.$store.commit("JIAN", this.n);
    },
    incrementOdd() {
      // if (this.$store.state.sum % 2) {
      this.$store.dispatch("jiaOdd", this.n);
      // }
    },
    incrementWait() {
      // setTimeout(() => {
      this.$store.dispatch("jiaWait", this.n);
      // }, 500);
    },
  },
};
</script>
<style scoped>
button {
  margin-left: 5px;
}
</style>
8. 四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性

    computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

  2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

    computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

  3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

    methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

    methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

对比

核心代码
store/index.js
// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

// 准备actions——用于相应组件中的动作
const actions = {
    // jia(context, value) {
    //     console.log('actions中的jia被调用了', context, value);
    //     context.commit('JIA', value)
    // },
    // jian(context, value) {
    //     console.log('actions中的jian被调用了', context, value);
    //     context.commit('JIAN', value)
    // },
    jiaOdd(context, value) {
        console.log('actions中的jiaOdd被调用了', context, value);
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        console.log('actions中的jiaWait被调用了', context, value);
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },
}
// 准备 mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutations中的JIA被调用了', state, value);
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了', state, value);
        state.sum -= value
    }
}
// 准备 state——用于储存数据
const state = {
    sum: 0, // 当前的和
    school: '尚硅谷',
    subject: '前端'
}
// 准备 getters——用于将 state 中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
1. 求和案例_mapState与mapGetters

Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }},学习{{ subject }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数据
    };
  },
  computed: {
    // 靠程序员自己亲自去写计算属性：he、xuexiao、xueke
    /* he() {
      return this.$store.state.sum;
    },
    xuexiao() {
      return this.$store.state.school;
    },
    xueke() {
      return this.$store.state.subject;
    }, */
    // 借助 mapState 生成计算属性，从state中读取数据。（对象写法）
    // 使用展开运算符方法
    // ...mapState({ he: "sum", xuexiao: "school", xueke: "subject" }),

    /* sum() {
      return this.$store.state.sum;
    },
    school() {
      return this.$store.state.school;
    },
    subject() {
      return this.$store.state.subject;
    }, */
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    // 借助 mapState 生成计算属性，从state中读取数据。（数组写法）
    // 如果名字一样可以简写为数组形式：
    ...mapState(["sum", "school", "subject"]),

    /* ************************************************ */

    /* bigSum() {
      return this.$store.getters.bigSum;
    }, */

    // 借助 mapGetters 生成计算属性，从 getters 中读取数据。（对象写法）
    // ...mapGetters({ bigSum: "bigSum" }),

    // 借助 mapGetters 生成计算属性，从 getters 中读取数据。（数组写法）
    ...mapGetters(["bigSum"]),
  },
  mounted() {
    // console.log("Count", this.$store);
    const x = mapState({ he: "sum", xuexiao: "school", xueke: "subject" });
    console.log(x);
  },
  methods: {
    increment() {
      // this.$store.dispatch("jia", this.n);
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      // this.$store.dispatch("jian", this.n);
      this.$store.commit("JIAN", this.n);
    },
    incrementOdd() {
      // if (this.$store.state.sum % 2) {
      this.$store.dispatch("jiaOdd", this.n);
      // }
    },
    incrementWait() {
      // setTimeout(() => {
      this.$store.dispatch("jiaWait", this.n);
      // }, 500);
    },
  },
};
</script>
<style scoped>
button {
  margin-left: 5px;
}
</style>
2. 求和案例_mapMutations与mapActions

Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }},学习{{ subject }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数据
    };
  },
  computed: {
    // 借助 mapState 生成计算属性，从state中读取数据。（对象写法）
    // ...mapState({ he: "sum", xuexiao: "school", xueke: "subject" }),

    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    // 借助 mapState 生成计算属性，从state中读取数据。（数组写法）
    ...mapState(["sum", "school", "subject"]),

    /* ************************************************ */

    // 借助 mapGetters 生成计算属性，从 getters 中读取数据。（对象写法）
    // ...mapGetters({ bigSum: "bigSum" }),

    // 借助 mapGetters 生成计算属性，从 getters 中读取数据。（数组写法）
    ...mapGetters(["bigSum"]),
  },
  mounted() {
    // console.log("Count", this.$store);
    const x = mapState({ he: "sum", xuexiao: "school", xueke: "subject" });
    console.log(x);
  },
  methods: {
    // 程序员亲自写方法
    /* increment() {
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      this.$store.commit("JIAN", this.n);
    }, */

    // 借助 mapMutations 生成对应的方法，方法中会调用 commit  去联系 mutations 。（对象写法）
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }),

    // 借助 mapMutations 生成对应的方法，方法中会调用 commit  去联系 mutations 。（数组写法）
    //  ...mapMutations(["JIA", "JIAN" ]),

    /* ************************************* */

    // 程序员亲自写方法
    /* incrementOdd() {
      this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
      this.$store.dispatch("jiaWait", this.n);
    }, */

    // 借助 mapActions 生成对应的方法，方法中会调用 dispatch  去联系 actions 。（对象写法）
    ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),

    // 借助 mapActions 生成对应的方法，方法中会调用 dispatch  去联系 actions 。（数组写法）
    // ...mapActions(["jiaOdd", "jiaWait"]),
  },
};
</script>
<style scoped>
button {
  margin-left: 5px;
}
</style>
9. 多组件共享数据
核心代码
1. Count.vue
<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }},学习{{ subject }}</h3>
    <h3 style="color: red;">Person组件的总人数是:{{ personList.length }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数据
    };
  },
  mounted() {
    // console.log("Count", this.$store);
    // const x = mapState({ he: "sum", xuexiao: "school", xueke: "subject" });
    // console.log(x);
  },
  computed: {
    // 借助 mapState 生成计算属性，从state中读取数据。（数组写法）
    ...mapState(["sum", "school", "subject", "personList"]),
    // 借助 mapGetters 生成计算属性，从 getters 中读取数据。（数组写法）
    ...mapGetters(["bigSum"]),
  },
  methods: {
    // 借助 mapMutations 生成对应的方法，方法中会调用 commit  去联系 mutations 。（对象写法）
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }),
    // 借助 mapActions 生成对应的方法，方法中会调用 dispatch  去联系 actions 。（对象写法）
    ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
  },
};
</script>
<style scoped>
button {
  margin-left: 5px;
}
</style>
2. Person.vue
<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red;">Count组件的求和为:{{ sum }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
// import { mapState } from "vuex";
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    personList() {
      return this.$store.state.personList;
    },
    sum() {
      return this.$store.state.sum;
    },
    // ...mapState(["personList"]),
  },
  methods: {
    add() {
      const personList = { id: nanoid(), name: this.name };
      //   console.log(personList);
      this.$store.commit("ADD_PERSON", personList);
      this.name = "";
    },
  },
};
</script>

<style>
</style>
3. store/index.js
// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

// 准备actions——用于相应组件中的动作
const actions = {
    // jia(context, value) {
    //     console.log('actions中的jia被调用了', context, value);
    //     context.commit('JIA', value)
    // },
    // jian(context, value) {
    //     console.log('actions中的jian被调用了', context, value);
    //     context.commit('JIAN', value)
    // },
    jiaOdd(context, value) {
        console.log('actions中的jiaOdd被调用了', context, value);
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        console.log('actions中的jiaWait被调用了', context, value);
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },
}
// 准备 mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutations中的JIA被调用了', state, value);
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了', state, value);
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mutations中的ADD_PERSON被调用了', state, value);
        state.personList.unshift(value)
    }
}
// 准备 state——用于储存数据
const state = {
    sum: 0, // 当前的和
    school: '尚硅谷',
    subject: '前端',
    personList: [{
        id: '001',
        name: '张三'
    }]
}
// 准备 getters——用于将 state 中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

4.app.vue

<template>
  <div>
    <count />
    <hr />
    <Person />
  </div>
</template>
<script>
import Count from "./components/Count.vue";
import Person from "./components/Person.vue";
export default {
  components: { Count, Person },
  name: "App",
  mounted() {
    // console.log("App", this);
  },
};
</script>
<style scoped>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>

共享数据

10. 模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

  3. 开启命名空间后，组件中读取state数据：

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

  4. 开启命名空间后，组件中读取getters数据：

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
核心代码
1. Count.vue
<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }},学习{{ subject }}</h3>
    <h3 style="color: red">Person组件的总人数是:{{ personList.length }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数据
    };
  },
  mounted() {
    // console.log("Count", this.$store);
    // const x = mapState({ he: "sum", xuexiao: "school", xueke: "subject" });
    // console.log(x);
  },
  computed: {
    // 借助 mapState 生成计算属性，从state中读取数据。（数组写法）
    ...mapState("countAbout", ["sum", "school", "subject"]),
    ...mapState("personAbout", ["personList"]),
    // 借助 mapGetters 生成计算属性，从 getters 中读取数据。（数组写法）
    ...mapGetters("countAbout", ["bigSum"]),
  },
  methods: {
    // 借助 mapMutations 生成对应的方法，方法中会调用 commit  去联系 mutations 。（对象写法）
    ...mapMutations("countAbout", { increment: "JIA", decrement: "JIAN" }),
    // 借助 mapActions 生成对应的方法，方法中会调用 dispatch  去联系 actions 。（对象写法）
    ...mapActions("countAbout", {
      incrementOdd: "jiaOdd",
      incrementWait: "jiaWait",
    }),
  },
};
</script>
<style scoped>
button {
  margin-left: 5px;
}
</style>
2. Person.vue
<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">Count组件的求和为:{{ sum }}</h3>
    <h3>列表中第一个人的姓名是:{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList;
    },
    sum() {
      return this.$store.state.countAbout.sum;
    },
    firstPersonName() {
      return this.$store.getters["personAbout/firstPersonName"];
    },
  },
  methods: {
    add() {
      const personList = { id: nanoid(), name: this.name };
      this.$store.commit("personAbout/ADD_PERSON", personList);
      this.name = "";
    },
    addWang() {
      const personList = { id: nanoid(), name: this.name };
      this.$store.dispatch("personAbout/addPersonWang", personList);
      this.name = "";
    },
    addPersonServer() {
      this.$store.dispatch("personAbout/addPersonServer");
    },
  },
};
</script>

<style>
</style>
3. store/index.js
// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
// 使用vuex
Vue.use(Vuex)

// 创建并暴露store
export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})
4. store/count.js
// 求和相关的配置
export default {
    namespaced: true, // 定义命名空间  请注意，如果你的模块没有定义命名空间，那么你在访问模块的状态、操作和 getter 时不需要使用命名空间前缀
    actions: {
        jiaOdd(context, value) {
            console.log('actions中的jiaOdd被调用了', context, value);
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            console.log('actions中的jiaWait被调用了', context, value);
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value) {
            console.log('mutations中的JIA被调用了', state, value);
            state.sum += value
        },
        JIAN(state, value) {
            console.log('mutations中的JIAN被调用了', state, value);
            state.sum -= value
        },
    },
    state: {
        sum: 0, // 当前的和
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
5. store/person.js
// 人员管理相关的配置
import axios from "axios";
import {
    nanoid
} from "nanoid";
export default {
    namespaced: true, // 定义命名空间
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            } else {
                alert('添加的人必须姓王！')
            }
        },
        addPersonServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', {
                        id: nanoid(),
                        name: response.data
                    })
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了', state, value);
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [{
            id: '001',
            name: '张三'
        }]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}
6. app.vue
<template>
  <div>
    <count />
    <hr />
    <Person />
  </div>
</template>
<script>
import Count from "./components/Count.vue";
import Person from "./components/Person.vue";
export default {
  components: { Count, Person },
  name: "App",
  mounted() {
    // console.log("App", this);
  },
};
</script>
<style scoped>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>

模块化

哲子君
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值