求和案例_多组件共享数据

20_脚手架/vue_code/25.src_求和案例_多组件共享数据/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/25.src_求和案例_多组件共享数据/components/Count.vue

@@ -0,0 +1,53 @@
+<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)
+  },
+
+  methods: {
+    ...mapMutations({add:'vuexAdd', sub:'vuexSub'}),  // 对象写法
+    // ...mapMutations(['vuexAdd', 'vuexSub']),   //数组写法
+
+    ...mapActions({addOdd:'vuexAddOdd', addWait:'vuexAddWait'}),
+  },
+
+  computed: {
+    ...mapState(['sum', 'school', 'subject','personList']),  // 数组写法
+    // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),  // 对象写法
+
+    ...mapGetters({bigSum: 'bigSum'})
+  }
+}
+</script>
+
+<style>
+button {
+  margin-left: 5px
+}
+</style>

20_脚手架/vue_code/25.src_求和案例_多组件共享数据/components/Person.vue

@@ -0,0 +1,45 @@
+<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 personObj = {id: nanoid(), name:this.name}
+      this.$store.commit('ADD_PERSON', personObj)
+      this.name = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/25.src_求和案例_多组件共享数据/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/25.src_求和案例_多组件共享数据/store/index.js

@@ -0,0 +1,59 @@
+// 用于创建vue中核心 store
+// 引入Vue
+import Vue from "vue";
+// 引入vuex
+import Vuex from 'vuex'
+
+// 应用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
+})

20_脚手架/vue_code/src/App.vue

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

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

@@ -3,6 +3,7 @@
     <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>
@@ -37,7 +38,7 @@ export default {
   },
 
   computed: {
-    ...mapState(['sum', 'school', 'subject']),  // 数组写法
+    ...mapState(['sum', 'school', 'subject','personList']),  // 数组写法
     // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),  // 对象写法
 
     ...mapGetters({bigSum: 'bigSum'})

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

@@ -0,0 +1,45 @@
+<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 personObj = {id: nanoid(), name:this.name}
+      this.$store.commit('ADD_PERSON', personObj)
+      this.name = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -28,13 +28,19 @@ const mutations = {
     },
     vuexSub(state, value) {
         state.sum -= value
+    },
+    ADD_PERSON(state, personObj) {
+        state.personList.unshift(personObj)
     }
 }
 //准备state-用于存储数据
 const state = {
     sum: 0,
     school: '修仙学院',
-    subject: '修仙'
+    subject: '修仙',
+    personList: [
+        {id:'001', name:'张三'}
+    ]
 }
 
 // getters 用于对state中的数据进行加工，类似用computed