多组件共享数据

course/vue2/vuex/heima/src/App.vue

 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <Count msg="Welcome to Your Vue.js App"/>
-    <HelloWorld id="hello" msg="Welcome to Your Vue.js App"/>
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <Count class="hideComponents" msg="Welcome to Your Vue.js App" />
+    <HelloWorld id="hello" msg="Welcome to Your Vue.js App" />
+    <hr />
+    <Count2 />
+    <hr />
+    <Person />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-import Count from './components/Count.vue'
+import HelloWorld from "./components/HelloWorld.vue";
+import Count from "./components/Count.vue";
+import Count2 from "./components/Count2";
+import Person from "./components/Person";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     HelloWorld,
-    Count
-  }
-}
+    Count,
+    Count2,
+    Person,
+  },
+};
 </script>
 
 <style>
@@ -32,4 +40,8 @@ export default {
 #hello {
   display: none;
 }
+
+.hideComponents {
+  display: none;
+}
 </style>

course/vue2/vuex/heima/src/components/Count2.vue

+<template>
+  <div>
+    <h1>当前求和为：{{ sum }}</h1>
+    <h3>当前求和的10倍为：{{ bigSum }}</h3>
+    <h3>我是{{ name }}，我在{{ school }}学习</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:'Count2Com',
+	data() {
+		return {
+			n:1, //用户选择的数字
+		}
+	},
+	methods: {
+		...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),
+		...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
+	},
+	computed:{
+		...mapState(['sum','school','name','personList']),
+		...mapGetters(['bigSum'])
+	}
+}
+</script>
+
+<style>
+button {
+  margin-left: 5px;
+}
+</style>

course/vue2/vuex/heima/src/components/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 {nanoid} from 'nanoid'
+	export default {
+		name:'PersonComp',
+		data() {
+			return {
+				name:''
+			}
+		},
+		computed:{
+			personList(){
+				return this.$store.state.personList
+			},
+			sum(){
+				return this.$store.state.sum
+			}
+		},
+		methods: {
+			add(){
+				const personObj = {id:nanoid(),name:this.name}
+				this.$store.commit('ADD_PERSON',personObj)
+				this.name = ''
+			}
+		}
+	}
+</script>

course/vue2/vuex/heima/src/store/index.js

+//引入Vue核心库
 import Vue from 'vue'
+//引入Vuex
 import Vuex from 'vuex'
-
+//应用Vuex插件
 Vue.use(Vuex)
    
-export default new Vuex.Store({
-  state: {
-    sum:0 //当前的和
-  },
-  getters: {
-    bigSum(state) {
-      console.log(state)
-      return state.sum * 10
-    }
-  },
-  mutations: {
-    ADD(state,value){
-      console.log("mutations ADD")
-      state.sum += value
-    },
-    SUBTRACT(state,value){
-      console.log("mutations SUBTRACT")
-      state.sum -= value
-    }
-  },
-  actions: {
+//准备actions对象——响应组件中用户的动作
+const actions = {
     addOdd(context,value){
         console.log("actions中的addOdd被调用了")
         if(context.state.sum % 2){
@@ -36,7 +19,40 @@ export default new Vuex.Store({
 			context.commit('ADD',value)
 		},500)
     },
+}
+//准备mutations对象——修改state中的数据
+const mutations = {
+    ADD(state,value){
+        state.sum += value
     },
-  modules: {
+    SUBTRACT(state,value){
+        state.sum -= value
+    },
+	ADD_PERSON(state,value){
+		console.log('mutations中的ADD_PERSON被调用了')
+		state.personList.unshift(value)
+	}
+}
+//准备state对象——保存具体的数据
+const state = {
+    sum:0, //当前的和
+    name:'JOJO',
+    school:'尚硅谷',
+    personList:[
+		{id:'001',name:'JOJO'}
+	]
+}
+//准备getters对象——用于将state中的数据进行加工
+const getters = {
+    bigSum(){
+        return state.sum * 10
     }
+}
+   
+//创建并暴露store
+export default new Vuex.Store({
+    actions,
+    mutations,
+    state,
+    getters
 })