Vue-vuex

state

存储数据(任何一个组件都可以调用)

// store/index.js
state: {
	count: 666888,
	qqq: 123,
	www: 456
}

// 组件中使用方法
// 一 直接使用
<p>{{$store.state.count}}</p>
<p>{{$store.state.qqq}}</p>
<p>{{$store.state.www}}</p>

// 二 简易使用
<h1>{{count}}</h1>
<h1>{{qqq}}</h1>
<h1>{{www}}</h1>

// 先在组件中引入 辅助函数 最后直接使用即可
import { mapState } from "vuex";
computed: {
	...mapState(["count", "qqq", "www"]),
	
    // 上面的这一种写法 等于 下面的三种写法

    // count() {
    //   return this.$store.state.count;
    // },
    // qqq() {
    //   return this.$store.state.qqq;
    // },
    // www() {
    //   return this.$store.state.www;
    // }
}

mutations

1、存储用来改变 state中数据的方法 只能写同步
2、mutations 中的方法是用来改变 state中的数据的
3、再 mutations中的函数 第一个参数 都是 state
4、第二个参数 是通过 commit 执行的时候传进来的参数
5、这里的函数最多只能有两个参数

// store/index.js
mutations: {
	changeCount(state, params) {
		console.log(state, params);
		// state:state中数据
		// params:commit 执行的时候传进来的参数
		state.count = params
	}
}

// 组件中使用方法
<input type="text" v-model="count" />
// 一 用 watch()方法
watch: {
	// 监听 input中的 count只要改变就会触发该函数
	count(newVal) {
		this.$store.commit("changeCount", newVal);
	}
}

<input type="text" v-model="count" />
// 二 用 computed()方法
computed: {
// computed(计算属性的两种用法)

	// 一、 只能获取值 不能改变值
	// count() {
	//   return this.$store.state.count;
	// }
	
	// 二、 获取和设置
	count: {
		// get 获取
		get() {
			return this.$store.state.count;
		},
		// set 设置
		set(val) {
			this.$store.commit("changeCount", val);
		}
	}
}

// 三
// store/index.js
mutations: {
	changeName(state, params) {
		state.name = params
	}
}
// 组件中
<button @click="fn('清欢')">点击直接改变名字</button>
methods: {
	fn(val) {
		this.$store.commit("changeName",val);
	}
}

// 四 用简易方法
// 先在组件中引入 辅助函数 最后直接传值使用
import { mapMutations } from "vuex";
methods: {
	...mapMutations(["changeCount"])
}

<button @click="changeCount(888)">点击改变</button>

actions

1、专门用来写异步
2、在 action中的函数 第一个参数 都是 store(new 出来vuex实例)
3、第二个参数 是通过 dispatch 执行这个函数的时候传进来的参数
4、这里的函数最多只能有两个参数

// store/index.js
actions: {
	changeCountFn(store, params) {
		setTimeout(() => {
			console.log(store, params);
			store.commit("changeCount", params)
		}, 2000)
	}
}

// 组件中使用方法
// 方法 一
<button @click="changeCountFn(666)">点击后 2秒改变</button>
methods:{
	changeCountFn(val) {
		this.$store.dispatch("changeCountFn", val);
	}
}

// 方法 二
// 引入辅助函数
import { mapActions } from "vuex";
methods: {
	...mapActions(["changeCountFn"]),
}
<button @click="changeCountFn(666)">点击后 2秒改变</button>

getters

理解成 vuex的计算属性 即可

// store/index.js
getters: {
	// 理解成 vuex的计算属性 即可
	countType(state, getters) {
		console.log(getters);
		return state.count % 2 ? "奇数" : "偶数"
	}
}

// 组件中使用方法
//{{$store.state.count % 2 ? "奇数":"偶数"}}

// 方法一 直接调用
{{$store.getters.countType}}

// 方法二
// 先在组件中引入 辅助函数 最后直接在组件中调用即可
import { mapGetters } from "vuex";
computed: {
	...mapGetters(["countType"])
}

//使用
{{countType}}

modules

// store/index.js
modules: {
	login: loginModules
}

let loginModules = {
	namespaced: true,
	state: {
		name: "清欢"
	},
	mutations: {
		changeName(state, params) {
			state.name = params
		}
	},
	actions: {
	
	}
}

// 组件中使用方法
// state 中的用法
<h1>{{$store.state.login.name}}</h1>

// mutations 中的用法
<button @click="fn('店家')">店家</button>
methods:{
	fn(val) {
		this.$store.commit("login/changeName",val);
	}
}

vuex 中不同模块中(mutations,actions)的函数名字重复了 那么函数都会执行

// 解决方法 一
// 让它变成一个独立的模块
namespaced: true

// 解决方法 二
// 指定是哪一个模块下要执行
fn() {
	this.$store.commit("login/changeName");
}