Vuex的引入及其仓库store的配置

ShaLiWa 2020-01-17

以下是Vuex全局状态管理,数据共享具体操作:
官网:https://vuex.vuejs.org/zh/installation.html

<!-- 以下是调用(获取/设置)共享数据的页面:01.vue -->
<template>
	<div>
		<h3>
			Vuex全局状态管理,数据共享:
			1,可以查看vuex官网:https://vuex.vuejs.org/zh/installation.html
			2,引入vuex有两种方式:
				a,直接下载保存vuex.js
				b,(如果使用cnpm,所以下面也要使用cnpm)在项目名称下一级安装vuex:
					    安装: cnpm install vuex --save
						卸载: cnpm uninstall vuex
			3,所有插件的使用都是在src/main.js中进行导入的。包括:插件vue.js,vuex.js,App,router等。
				打开src/main.js 导入如: import store from ‘./store‘
				即:在src目录下创建stroe文件夹,以及在store里面创建index.js文件,并进行配置,如下:

				import Vue from ‘vue‘    //调用 vue    这里可以分号,也可以不添加分号
				import Vuex from ‘vuex‘;    //调用 vuex 插件   这里可以分号,也可以不添加分号

				Vue.use(Vuex)     //全局调用Vuex,这里千万不能添加分号

				export default new Vuex.Store({   //实例化vuex仓库
					/*store运行机制:
						通过actions触发mutations(类似事件),进而修改具体仓库状态state(store.state.count)
						Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。*/
					state:{//共享数据池,声明公共数据,即状态
						count:0,
						num:1,
					},
					mutations:{//用于处理公共数据
						increment(state,num){
							state.count++;
							state.num = num;
						}
					},
					actions:{//把数据处理委托给mutations对象的increment方法
						inc({commit},obj){  //唯一方法:使用 store.commit 方法触发状态变更
							commit(‘increment‘,obj);
						}
					}
				})

			4,在需要调用共享数据的页面进行数据调用和修改:
				获取共享数据:this.$store.state.count;
				修改共享数据:this.$store.dispatch(‘inc‘,形参/实参);
				/*store运行机制:actions --> mutations --> state 所以在修改共享数据时,
				是直接调用actions中的指定函数,所以这里的‘inc‘函数明一定要存在。*/
		</h3>

		<div>{{count}}</div>
		<input type="button" name="" value="修改共享数据num" @click="setNum"><br/>
		<input type="button" name="" value="获取共享数据num" @click="getNum"><br/>
		<input type="button" name="" value="获取共享数据count" @click="getCount"><br/>
		<div>=========================================</div>
		<input type="button" name="" value="修改共享数据love" @click="setLove"><br/>
		<input type="button" name="" value="获取共享数据love" @click="getLove"><br/>
		<input type="button" name="" value="获取共享数据a" @click="getA"><br/>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				count:0,
				love:‘I Love You Forever!‘,
			}
		},
		methods:{
			setNum(){
				this.$store.dispatch(‘inc‘,this.love);//修改共享数据num
				//状态修改一定是在mutations中,一定不能在调用的页面之中
				// this.$store.state.count++;
			},
			getNum(){
				console.log(this.$store.state.num);
			},getCount(){
				console.log(this.$store.state.count);
			},
			setLove(){
				this.$store.dispatch(‘str‘,‘I want to fuck you fuck you!‘);
				//状态修改一定是在mutations中,一定不能在调用的页面之中
				// this.$store.state.a++;
			},
			getLove(){
				console.log(this.$store.state.love);
			},
			getA(){
				console.log(this.$store.state.a);
			}
		}
	}
</script>


// 以下是src/store/index.js页面的配置
import Vue from ‘vue‘    //调用 vue    这里可以分号,也可以不添加分号
import Vuex from ‘vuex‘;    //调用 vuex 插件   这里可以分号,也可以不添加分号

Vue.use(Vuex)     //全局调用Vuex,这里千万不能添加分号

export default new Vuex.Store({   //实例化vuex仓库
	/*store运行机制:
		通过store.commit方法---触发---》store.state状态变更---》
		Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。*/
	state:{//共享数据池,声明公共数据,即仓库状态
		count:0,
		num:1,
		a:0,
		love:‘i love you‘,
	},
	mutations:{//用于处理公共数据,mutation 英 /mju??te??n/ 突变
		increment(state,num){
			state.count++;//状态修改一定是在mutations中,一定不能在调用的页面之中
			state.num = num;
		},
		strings(state,str){
			this.state.love=str;
			this.state.a++;//状态修改一定是在mutations中,一定不能在调用的页面之中
		}
	},
	actions:{//把数据处理委托给mutations对象的increment方法
		inc({commit},obj){
			commit(‘increment‘,obj);
		},
		str({commit},str){
			commit(‘strings‘,str)
		}
	}
})

相关推荐