Vuex学习

• 1.概念
• 2.何时使用
• 3. 原理图分析
• 4.搭建vuex环境
• 5. 基本使用
• • 代码结构
  • Count.vue
  • index.js
  • App.vue
  • main.js
  • 效果

1.概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态（数据）。Vuex 也集成到 Vue 的官方调试工具 devtools 。

简单来说，Vuex是在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用

当多个组件需要共享数据

• 多个组件依赖于同一状态
• 来自不同组件的行为需要变更同一状态

3. 原理图分析

接下来以一个函数add（参数为1），来说明Vuex的原理图。

（1）Satet：vuex 管理的状态对象（数据对象） ，它应该是唯一的。

（2） actions：为一个对象，包含多个响应用户动作的回调函数。

• 在组件中使用$store.dispatch('对应的 action 回调名')触发actions 中的回调
• 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state。
• 可以包含异步代码（定时器, ajax 等等）

（3）mutations：是一个对象，包含多个直接更新 state 的方法

• 在 action 中使用commit('对应的 mutations 方法名') 触发 mutations 中的方法
• 不能写异步代码、只能单纯的操作 state
  

4.搭建vuex环境

1.执行npm i vuex@3安装 Vuex3（Vue2搭配Vuex3使用）

2.创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

3.在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

5. 基本使用

代码结构

Count.vue

（1）在每个组件和vm身上都会有$store.state属性，我们可以从中获得state状态中的sum。

（2）若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit。

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},
	}
</script>

<style >
	button{
		margin-left: 5px;
	}
</style>

index.js

mutations中的函数一般使用大写形式

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	jia(context,value){
		context.commit('JIA',value)
	},
	jian(context,value){
		context.commit('JIAN',value)
	},
	jiaOdd(context,value){
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		state.sum += value
	},
	JIAN(state,value){
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
	}
</script>

main.js

创建vm时配置store

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

//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
})

效果

在 devtools可以观察到mutations 中的方法的调用。

标签：Vue,记录,mutations,value,学习,state,Vuex,store
来源： https://blog.csdn.net/qq_45890970/article/details/123180762