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
  }
})

//方式一：自己直接讀取
this.$store.state.personAbout.list


//方式二：借助mapState讀?。?
...mapState('countAbout',['sum','school','subject']),

//方式一：自己直接讀取
this.$store.getters['personAbout/firstPersonName']

//方式二：借助mapGetters讀?。?
...mapGetters('countAbout',['bigSum'])

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)


//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)


//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store'

//關(guān)閉Vue的生產(chǎn)提示
Vue.config.productionTip = false

//創(chuàng)建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

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

<script>
	import Count from './components/Count'
	import Person from './components/Person'

	export default {
		name:'App',
		components:{Count,Person},
	}
</script>

//該文件用于創(chuàng)建Vuex中最為核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//應(yīng)用Vuex插件
Vue.use(Vuex)

//創(chuàng)建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions,
		personAbout:personOptions
	}
})

//求和相關(guān)的配置
export default {
	namespaced:true,
	actions:{
		jiaOdd(context,value){
			console.log('actions中的jiaOdd被調(diào)用了')
			if(context.state.sum % 2){
				context.commit('JIA',value)
			}
		},
		jiaWait(context,value){
			console.log('actions中的jiaWait被調(diào)用了')
			setTimeout(()=>{
				context.commit('JIA',value)
			},500)
		}
	},
	mutations:{
		JIA(state,value){
			console.log('mutations中的JIA被調(diào)用了')
			state.sum += value
		},
		JIAN(state,value){
			console.log('mutations中的JIAN被調(diào)用了')
			state.sum -= value
		},
	},
	state:{
		sum:0, //當(dāng)前的和
		school:'尚硅谷',
		subject:'前端',
	},
	getters:{
		bigSum(state){
			return state.sum*10
		}
	},
}

//人員管理相關(guān)的配置
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被調(diào)用了')
			state.personList.unshift(value)
		}
	},
	state:{
		personList:[
			{id:'001',name:'張三'}
		]
	},
	getters:{
		firstPersonName(state){
			return state.personList[0].name
		}
	},
}

<template>
	<div>
		<h1>當(dāng)前求和為：{{sum}}</h1>
		<h3>當(dāng)前求和放大10倍為：{{bigSum}}</h3>
		<h3>我在{{school}}，學(xué)習(xí){{subject}}</h3>
		<h3 style="color:red">Person組件的總?cè)藬?shù)是：{{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)">當(dāng)前求和為奇數(shù)再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用戶選擇的數(shù)字
			}
		},
		computed:{
			//借助mapState生成計(jì)算屬性，從state中讀取數(shù)據(jù)。（數(shù)組寫法）
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			//借助mapGetters生成計(jì)算屬性，從getters中讀取數(shù)據(jù)。（數(shù)組寫法）
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成對應(yīng)的方法，方法中會(huì)調(diào)用commit去聯(lián)系mutations(對象寫法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成對應(yīng)的方法，方法中會(huì)調(diào)用dispatch去聯(lián)系actions(對象寫法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		mounted() {
			console.log(this.$store)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

<template>
	<div>
		<h1>人員列表</h1>
		<h3 style="color:red">Count組件求和為：{{sum}}</h3>
		<h3>列表中第一個(gè)人的名字是：{{firstPersonName}}</h3>
		<input type="text" placeholder="請輸入名字" v-model="name">
		<button @click="add">添加</button>
		<button @click="addWang">添加一個(gè)姓王的人</button>
		<button @click="addPersonServer">添加一個(gè)人，名字隨機(jī)</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 personObj = {id:nanoid(),name:this.name}
				this.$store.commit('personAbout/ADD_PERSON',personObj)
				this.name = ''
			},
			addWang(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.dispatch('personAbout/addPersonWang',personObj)
				this.name = ''
			},
			addPersonServer(){
				this.$store.dispatch('personAbout/addPersonServer')
			}
		},
	}
</script>