完成vuex中namespace的学习

20_脚手架/vue_code/26.src_vuex_求和案例_namespace/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <Count/>
+    <Person/>
+  </div>
+</template>
+
+<script>
+import Count from "@/components/Count.vue";
+import Person from "@/components/Person.vue";
+
+export default {
+  name: "App",
+  components: {Person, Count},
+  mounted() {
+    console.log('App', this)
+  }
+}
+</script>

20_脚手架/vue_code/26.src_vuex_求和案例_namespace/components/Count.vue

@@ -0,0 +1,54 @@
+<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="add(n)">+</button>
+    <button @click="sub(n)">-</button>
+    <button @click="addOdd(n)">当前求和为奇数再加</button>
+    <button @click="addWait(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)
+  },
+
+  computed: {
+    ...mapState('countOptions', ['sum', 'school', 'subject']),  // 数组写法
+    ...mapState('personOptions', ['personList']),  // 数组写法
+    // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),  // 对象写法
+
+    ...mapGetters('countOptions', {bigSum: 'bigSum'})
+  },
+
+  methods: {
+    ...mapMutations('countOptions', {add: 'vuexAdd', sub: 'vuexSub'}),  // 对象写法
+    // ...mapMutations(['vuexAdd', 'vuexSub']),   //数组写法
+
+    ...mapActions('countOptions', {addOdd: 'vuexAddOdd', addWait: 'vuexAddWait'}),
+  },
+}
+</script>
+
+<style>
+button {
+  margin-left: 5px
+}
+</style>

20_脚手架/vue_code/26.src_vuex_求和案例_namespace/components/Person.vue

@@ -0,0 +1,59 @@
+<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 {mapState} from 'vuex'
+import {nanoid} from "nanoid";
+
+export default {
+  name: "Person",
+  data() {
+    return {
+      name:''
+    }
+  },
+  computed: {
+    personList() {
+      return this.$store.state.personOptions.personList
+    },
+    sum() {
+      return this.$store.state.countOptions.sum
+    },
+    firstPersonName() {
+      return this.$store.getters["personOptions/firstPersonName"]
+    }
+
+  },
+  methods: {
+    add() {
+      const personObj = {id: nanoid(), name:this.name}
+      this.$store.commit('personOptions/ADD_PERSON', personObj)
+      this.name = ''
+    },
+    addWang() {
+      const personObj = {id: nanoid(), name:this.name}
+      this.$store.dispatch('personOptions/addPersonWang', personObj)
+      this.name = ''
+    },
+    addPersonServer() {
+      this.$store.dispatch('personOptions/addPersonServer')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/26.src_vuex_求和案例_namespace/main.js

@@ -0,0 +1,26 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入插件
+import vueResource from "vue-resource";
+
+import store from './store'
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(vueResource)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    store,
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')

20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/count.js

@@ -0,0 +1,35 @@
+// count相关的设置
+export default {
+    namespaced: true,
+    actions: {
+        vuexAddOdd(context, value) {
+            if (context.state.sum % 2) {
+                context.commit('vuexAdd', value)
+            }
+        },
+        vuexAddWait(context, value) {
+            setTimeout(() => {
+                    context.commit('vuexAdd', value)
+                }, 1000
+            )
+        }
+    },
+    mutations: {
+        vuexAdd(state, value) {
+            state.sum += value
+        },
+        vuexSub(state, value) {
+            state.sum -= value
+        },
+    },
+    state: {
+        sum: 0,
+        school: '修仙学院',
+        subject: '修仙',
+    },
+    getters: {
+        bigSum(state) {
+            return state.sum * 10
+        }
+    }
+}

20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/index.js

@@ -0,0 +1,72 @@
+// 用于创建vue中核心 store
+// 引入Vue
+import Vue from "vue";
+// 引入vuex
+import Vuex from 'vuex'
+
+import countOptions from './count'
+import personOptions from './person'
+
+// 应用Vuex插件
+Vue.use(Vuex)
+
+// 准备actions-用于响应组件中的动作,业务逻辑需要写到actions中
+// const actions = {
+//     vuexAddOdd(context, value) {
+//         if (context.state.sum % 2) {
+//             context.commit('vuexAdd', value)
+//         }
+//     },
+//     vuexAddWait(context, value) {
+//         setTimeout(() => {
+//                 context.commit('vuexAdd', value)
+//             }, 1000
+//         )
+//     }
+// }
+
+//准备mutations-用于操作数据
+// const mutations = {
+//     vuexAdd(state, value) {
+//         state.sum += value
+//     },
+//     vuexSub(state, value) {
+//         state.sum -= value
+//     },
+//     ADD_PERSON(state, personObj) {
+//         state.personList.unshift(personObj)
+//     }
+// }
+
+//准备state-用于存储数据
+// const state = {
+//     sum: 0,
+//     school: '修仙学院',
+//     subject: '修仙',
+//     personList: [
+//         {id: '001', name: '张三'}
+//     ]
+// }
+
+// getters 用于对state中的数据进行加工，类似用computed
+// const getters = {
+//     bigSum(state) {
+//         return state.sum * 10
+//     }
+// }
+
+// 创建并导出store
+// export default new Vuex.Store({
+//     actions,
+//     mutations,
+//     state,
+//     getters
+// })
+
+// namespace形式的导出
+export default new Vuex.Store({
+    modules: {
+        countOptions: countOptions,
+        personOptions: personOptions,
+    }
+})

20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/person.js

@@ -0,0 +1,42 @@
+// count相关的设置
+
+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, personObj) {
+            state.personList.unshift(personObj)
+        }
+    },
+    state: {
+        personList: [
+            {id: '001', name: '张三'}
+        ]
+    },
+    getters: {
+        firstPersonName(state) {
+            return state.personList[0].name
+        }
+    }
+}

20_脚手架/vue_code/src/components/Count.vue

@@ -3,7 +3,7 @@
     <h1>当前求和为: {{ sum }}</h1>
     <h3>当前求和放大10倍后为: {{ bigSum }}</h3>
     <h3>我在{{ school }}，学{{ subject }}</h3>
-    <h3 style="color: red">Person组件的总人数是：{{personList.length}}</h3>
+    <h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3>
     <select v-model.number="n">
       <option value="1">1</option>
       <option value="2">2</option>
@@ -30,19 +30,20 @@ export default {
     console.log('Count', this)
   },
 
-  methods: {
+  computed: {
-    ...mapMutations({add:'vuexAdd', sub:'vuexSub'}),  // 对象写法
+    ...mapState('countOptions', ['sum', 'school', 'subject']),  // 数组写法
-    // ...mapMutations(['vuexAdd', 'vuexSub']),   //数组写法
+    ...mapState('personOptions', ['personList']),  // 数组写法
+    // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),  // 对象写法
 
-    ...mapActions({addOdd:'vuexAddOdd', addWait:'vuexAddWait'}),
+    ...mapGetters('countOptions', {bigSum: 'bigSum'})
   },
 
-  computed: {
+  methods: {
-    ...mapState(['sum', 'school', 'subject','personList']),  // 数组写法
+    ...mapMutations('countOptions', {add: 'vuexAdd', sub: 'vuexSub'}),  // 对象写法
-    // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),  // 对象写法
+    // ...mapMutations(['vuexAdd', 'vuexSub']),   //数组写法
 
-    ...mapGetters({bigSum: 'bigSum'})
+    ...mapActions('countOptions', {addOdd: 'vuexAddOdd', addWait: 'vuexAddWait'}),
-  }
+  },
 }
 </script>
 

20_脚手架/vue_code/src/components/Person.vue

@@ -2,8 +2,11 @@
   <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>
@@ -23,18 +26,29 @@ export default {
   },
   computed: {
     personList() {
-      return this.$store.state.personList
+      return this.$store.state.personOptions.personList
     },
     sum() {
-      return this.$store.state.sum
+      return this.$store.state.countOptions.sum
+    },
+    firstPersonName() {
+      return this.$store.getters["personOptions/firstPersonName"]
     }
-    // ...mapState(['personList']),
+
   },
   methods: {
     add() {
       const personObj = {id: nanoid(), name:this.name}
-      this.$store.commit('ADD_PERSON', personObj)
+      this.$store.commit('personOptions/ADD_PERSON', personObj)
+      this.name = ''
+    },
+    addWang() {
+      const personObj = {id: nanoid(), name:this.name}
+      this.$store.dispatch('personOptions/addPersonWang', personObj)
       this.name = ''
+    },
+    addPersonServer() {
+      this.$store.dispatch('personOptions/addPersonServer')
     }
   }
 }

20_脚手架/vue_code/src/store/count.js

@@ -0,0 +1,35 @@
+// count相关的设置
+export default {
+    namespaced: true,
+    actions: {
+        vuexAddOdd(context, value) {
+            if (context.state.sum % 2) {
+                context.commit('vuexAdd', value)
+            }
+        },
+        vuexAddWait(context, value) {
+            setTimeout(() => {
+                    context.commit('vuexAdd', value)
+                }, 1000
+            )
+        }
+    },
+    mutations: {
+        vuexAdd(state, value) {
+            state.sum += value
+        },
+        vuexSub(state, value) {
+            state.sum -= value
+        },
+    },
+    state: {
+        sum: 0,
+        school: '修仙学院',
+        subject: '修仙',
+    },
+    getters: {
+        bigSum(state) {
+            return state.sum * 10
+        }
+    }
+}

20_脚手架/vue_code/src/store/index.js

@@ -4,56 +4,69 @@ import Vue from "vue";
 // 引入vuex
 import Vuex from 'vuex'
 
+import countOptions from './count'
+import personOptions from './person'
+
 // 应用Vuex插件
 Vue.use(Vuex)
 
 // 准备actions-用于响应组件中的动作,业务逻辑需要写到actions中
-const actions = {
+// const actions = {
-    vuexAddOdd(context, value) {
+//     vuexAddOdd(context, value) {
-        if (context.state.sum % 2) {
+//         if (context.state.sum % 2) {
-            context.commit('vuexAdd', value)
+//             context.commit('vuexAdd', value)
-        }
+//         }
-    },
+//     },
-    vuexAddWait(context, value) {
+//     vuexAddWait(context, value) {
-        setTimeout(() => {
+//         setTimeout(() => {
-                context.commit('vuexAdd', value)
+//                 context.commit('vuexAdd', value)
-            }, 1000
+//             }, 1000
-        )
+//         )
-    }
+//     }
-}
+// }
+
 //准备mutations-用于操作数据
-const mutations = {
+// const mutations = {
-    vuexAdd(state, value) {
+//     vuexAdd(state, value) {
-        state.sum += value
+//         state.sum += value
-    },
+//     },
-    vuexSub(state, value) {
+//     vuexSub(state, value) {
-        state.sum -= value
+//         state.sum -= value
-    },
+//     },
-    ADD_PERSON(state, personObj) {
+//     ADD_PERSON(state, personObj) {
-        state.personList.unshift(personObj)
+//         state.personList.unshift(personObj)
-    }
+//     }
-}
+// }
+
 //准备state-用于存储数据
-const state = {
+// const state = {
-    sum: 0,
+//     sum: 0,
-    school: '修仙学院',
+//     school: '修仙学院',
-    subject: '修仙',
+//     subject: '修仙',
-    personList: [
+//     personList: [
-        {id:'001', name:'张三'}
+//         {id: '001', name: '张三'}
-    ]
+//     ]
-}
+// }
 
 // getters 用于对state中的数据进行加工，类似用computed
-const getters = {
+// const getters = {
-    bigSum(state) {
+//     bigSum(state) {
-        return state.sum * 10
+//         return state.sum * 10
-    }
+//     }
-}
+// }
 
 // 创建并导出store
+// export default new Vuex.Store({
+//     actions,
+//     mutations,
+//     state,
+//     getters
+// })
+
+// namespace形式的导出
 export default new Vuex.Store({
-    actions,
+    modules: {
-    mutations,
+        countOptions: countOptions,
-    state,
+        personOptions: personOptions,
-    getters
+    }
 })

20_脚手架/vue_code/src/store/person.js

@@ -0,0 +1,42 @@
+// count相关的设置
+
+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, personObj) {
+            state.personList.unshift(personObj)
+        }
+    },
+    state: {
+        personList: [
+            {id: '001', name: '张三'}
+        ]
+    },
+    getters: {
+        firstPersonName(state) {
+            return state.personList[0].name
+        }
+    }
+}