VUEX-模块

1、安装Vuex 模块

npm install vuex --save -g

2、文档引入vuex【index.js】

import Vuex from "vuex"

3、使用Vuex模块【index.js】

Vue.use(Vuex);

4、定义stroe容器【index.js】

let store=new Vuex.Store({ })

5、把实列报出去【index.js】

export default store

6、主入口文件main.js 引入store文件【main.js】

import stroe from "./store/index"  //"./store/index" 可以缩写"./store"

7、将Vuex注入到Vue根实列【main.js】

new Vue({
	el: '#app',
	stroe,  //注入stroe
})

8、index.js 存放数据

let store=new Vuex.Store({
	state:{
		count:100, //定义一个状态
		maessage:"我是VUEX的数据"
	}
})

9、组件获取数据

export default {
	data () {
		return {
			msg: '我是Hello组件',
			number: this.$store.state.count,   //number初始值从Vuex的state中获取
			text:this.$store.state.maessage
		}
	}
}

10、修改数据
【1】、index定义修改状态方法

mutations:{ //修改数据
	updateNumber(state){
		state.number+=1;
	}
}

【2】、组件提交修改状态

methods:{
	changeNumber(){		//改变Vuex中的Number数据
		this.$store.commit("updateNumber");
	}
}

11、传参修改数据
【1】、index定义修改状态方法获取参数

mutations:{ //修改数据
	updateNumber(state,payload){
		state.number+=payload.add;
	}
}

【2】、组件提交修改状态带参数

methods:{
	changeNumber(){	//改变Vuex中的Number数据
		this.$store.commit("updateNumber",{add:10}); //传参数add:10
	}
}

12、计算数据【getters】
【1】、计算数据

getters:{
	totals(state){
		return state.showList.reduce((n,item)=>n+item.count,0); 
		//统计count之和
	}
}

【2】、使用计算结果

<p>总计：{{this.$store.getters.totals}}</p>

13、异步操作
【1】、index.js设置

actions:{
	updateCountAction(store,parmas){
		//只要提交mutations就有记录，如果mutations中有异步操作，
		记录的还是之前的值
		setTimeout(()=>{
			store.commit("updateCountRed",parmas);
		},1000)
	}
}

【2】、组建设置

red(id){
	this.$store.dispatch("updateCountAction",{id:id})
}

14、总结
【1】、每一个应用将仅仅包含一个store实列
【2】、更改store中的状态的唯一方法是提交mutation
【3】、Mutation必须是同步函数
【4】、Action可以包含任意异步操作
【5】、Action 提交的是Mutation,而不是直接变换状态

Store/index.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);
let store=new Vuex.Store({
	state:{ //存放数据
		number:100, //定义一个状态
		maessage:"我是VUEX的数据",
		showList:[
			{id:2008001,count:5},
			{id:2008002,count:7}
		]
	},
	getters:{
		totals(state){
			return state.showList.reduce((n,item)=>n+item.count,0); //统计count之和
		}
	},
	mutations:{ //修改数据
		updateNumber(state,payload){ //payload 获取参数
			state.number+=payload.add;
		},
		updateCountAdd(state,payload){
			let item=state.showList.find(item=>item.id==payload.id);
			item.count+=1;
		},
		updateCountRed(state,payload){
			let item=state.showList.find(item=>item.id==payload.id);
			item.count-=1;
		}
	},
	actions:{
		updateCountAction(store,parmas){//只要提交mutations就有记录，如果mutations中有异步操作，记录的还是之前的值
			setTimeout(()=>{
				store.commit("updateCountRed",parmas);
			},1000)
		}
	}
})
export default store

组件Hello.vue

<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<p>从Vuex 中获取的值为：{{number}}</p>
		<p>{{text}}</p>
		<button @click="changeNumber()">改变状态</button>
		<div v-for="(item,index) in showList" :key="index">
		<button @click="red(item.id)">-</button>
		<span>{{item.count}}</span>
		<button @click="add(item.id)">+</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Hello',
		data () {
			return {
				msg: '我是Hello组件',
				text:this.$store.state.maessage,
				//number初始值从Vuex的state中获取
				showList:this.$store.state.showList
			}
		},
		computed:{
			number(){
				return this.$store.state.number
			}
		},
		methods:{
			changeNumber(){//改变Vuex中的Number数据
				this.$store.commit("updateNumber",{add:10});
				 //{add:10} 传参数
			},
			add(id){
				this.$store.commit("updateCountAdd",{id:id})
			},
			red(id){
				this.$store.dispatch("updateCountAction",{id:id})
			}
		}
	}
</script>
<style>
</style>

组件Good.vue

<template>
	<div class="good">
	<h1>{{ msg }}</h1>
	<p>从Vuex 中获取的值为：{{this.$store.state.number}}</p>
	<p>{{this.$store.state.maessage}}</p>
	<button @click="changeNumber()">修改状态</button>
	<p>总计：{{this.$store.getters.totals}}</p>
	</div>
</template>
<script>
export default {
	name: 'Good',
	data () {
		return {
			msg: '我是Good组件'
		}
	},
	methods:{
		changeNumber(){
			this.$store.commit("updateNumber",{add:100}); 
			//{{add:100}} 传参数
		}
	}
}
</script>
<style>
</style>

App.vue

<template>
	<div id="app">
		<Hello></Hello>
		<hr>
		<Good></Good>
	</div>
</template>

<script>
import Hello from "./components/Hello"; 
import Good from "./components/Good"; 
export default {
	name: 'App',
	components:{
		Hello,Good
	}
}
</script>
<style>
	#app {
		color:red;
		text-align: center;
	}
</style>

Main.js

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

Vue.config.productionTip = false
new Vue({
	el: '#app',
	store,
	components: { App },
	template: '<App/>'
})
// 使用组件三部曲：引入组件、注册组件、使用组件