learnVuex

app.vue

<template>
  <div id="app">
	  
	  <h2>-- App 内容 modules相关内容--</h2>
	  <h3>{{$store.state.a.name}}</h3>
	  <button @click="mUpdateName">修改名字</button>
	  <h3>{{$store.getters.fullName}}</h3>
	  <h3>{{$store.getters.fullName1}}</h3>
	  <h3>{{$store.getters.fullName2}}</h3>
	  <button @click="asyncUpdateName">异步修改名字</button>
	  
		<h2>-- App 内容 info相关信息修改--</h2>
		<h3>{{$store.state.info}}</h3>
		<button @click="updateInfo">修改信息</button>
		
		<h2>-- App 内容 --</h2>
		<h2>{{message}}</h2>
		<h2>{{$store.state.counter}}</h2>
		<button @click="add1">+</button>
		<button @click="del1">-</button>
		<button @click="addCount(5)">+5</button>
		<button @click="addCount(10)">+10</button>
		<button @click="addStudent">添加学生</button>
		
		
		<h2>-- App 内容：getters相关信息 --</h2>
		<h3>{{$store.getters.powerCounter}}</h3>
		<h3>{{$store.getters.more20Stu}}</h3>
		<h3>{{$store.getters.more20StuLength}}</h3>
		<h3>{{$store.getters.more12Stu(21)}}</h3>
		
		<h2>-- Hello Vue 内容 --</h2>
		<hello-vue></hello-vue>
  </div>
</template>

<script>
import HelloVue from "@/components/HelloVue"

export default {
  name: 'App',
  components: {
    HelloVue
  },
  data(){
	  return{
		  // couter:this.$store.state.couter,
		  message:"LearnVuex"
	  }
  },
  methods:{
	  add1(){
		  this.$store.commit("add")
	  },
	  del1(){
		  this.$store.commit("del")
	  },
	 addCount(count){
		 this.$store.commit("addNum",count)
	 },
	addStudent(){
		const stu={id:103,name:"Bob",age:30}
		this.$store.commit("addStu",stu)
	},
	updateInfo(){
		// this.$store.commit("updateInfo")
		// this.$store.dispatch("aUpdateInfo",{
		// 	message:"我是携带的信息",
		// 	success:() => {
		// 		console.log("里面已经成功了")
		// 	}
		// })
		
		// this.$store.dispatch("aUpdateInfo","我是payload").then((res)=>{
		// 	console.log(res)
		// 	console.log("已经修改成功")
		// })
		this.$store.dispatch("aUpdateInfo","我是payload").then((res) => {
			console.log(res)
		})
	},
	mUpdateName(){
		this.$store.commit("updateName","lisi")
	},
	asyncUpdateName(){
		this.$store.dispatch("aUpdateName","王五")
	}
  }
}
</script>

<style>

</style>

store中index.js

import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装Vuex插件
Vue.use(Vuex)

// 2.创建对象

const moduleA={
	state:{
		name:"zhangsan"
	},
	mutations:{
		updateName(state,payload){
			state.name=payload
		}
	},
	getters:{
		fullName(state){
			return state.name+"1111"
		},
		fullName1(state,getters){
			return getters.fullName+"222"
		},
		fullName2(state,getters,rootState){
			return getters.fullName1+rootState.counter
		}
	},
	actions:{
		aUpdateName(context,payload){
			setTimeout(() => {
				context.commit("updateName",payload)
			},1000)
		}
	}
}

const store = new Vuex.Store({
	state:{
		counter:100,
		stu:[
			{
				id:100,
				name:"Kobe",
				age:21
			},
			{
				id:101,
				name:"James",
				age:22
			},
			{
				id:102,
				name:"Curry",
				age:12
			},
		],
		info:{name:"kobe",age:39,height:1.98}
	},
	mutations:{
		add(state){
			state.counter++
		},
		del(state){
			state.counter--
		},
		addNum(state,count){
			state.counter+=count
		},
		addStu(state,stu){
			state.stu.push(stu)
		},
		updateInfo(state){
			state.info.name="codeWhy";
			//错误代码: 此处不能使用异步操作
			// setTimeout(() => {
			// 	state.info.name="coderWhy"
			// }, 1000);
			
			Vue.set(state.info,"address","洛杉矶");
			Vue.delete(state.info,"age")
		}
	},
	// 异步操作在action中进行
	actions:{
		// aUpdateInfo(context,payload){
		// 	// setTimeout(() => {
		// 	// 	context.commit("updateInfo");
		// 	// 	console.log(payload.message);
		// 	// 	console.log(payload.success())
		// 	// },1000)
		// 	return new Promise((resolve,reject) => {
		// 		setTimeout(() => {
		// 			context.commit("updateInfo");
		// 			console.log(payload)
		// 			resolve("我是resolve")
		// 		},1000)
		// 	})
		// }
		// context 上下文 理解成store
		aUpdateInfo(context,payload){
			return new Promise((resolve,reject) => {
				context.commit("updateInfo");
				console.log(payload)
				resolve("我是resolve")
			})
		}
		
	},
	// 当需要传入改变的变量(state)时使用getters
	getters:{
		powerCounter(state){
			return state.counter*state.counter
		},
		more20Stu(state){
			return state.stu.filter(s => s.age>20)
		},
		more20StuLength(state,getters){
			return getters.more20Stu.length
		},
		// 依据传入参数进行改值
		more12Stu(state){
			// return function(age){
			// 	return state.stu.filter(s =>s.age>age)
			// }
			
			return age => state.stu.filter(s => s.age>age)
		}
	},
	modules:{
		a:moduleA
	}
})
// 3.导出store对象
export default store