Vuex

vuex 的基本配置，

建一个 store 文件，index.js 文件中

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

// 准备 actions 用于响应组件中的动作

const actions = {}

// 准备 mutations 用于操作数据（state）

const mutations = {}

// 准备 state 用于存储数据

const state = {}

// 

export default new Vuex.Store({

	actions,

	mutations,

	state

})

1. # 在页面调用 dispatch

   	<template>
   	<div>
   	<h2>当前求和为</h2>
   	<button @click="add">+</button>
   	</div>
   	</template>
   	<script>
   	export default {
   	name: 'Student',
   	data() {
   	return {
   	n: 1
   	}
   	},
   	mounted() {},
   	methods: {
   	add() {
   	this.$store.dispatch('jia', n)
   	}
   	},
   	}
   	</script>

2. # 在 store 的 index.js 中 actions 中注册 jia 方法

   	import Vue from 'vue'
   	import Vuex from 'vuex'
   	Vue.use(Vuex)
   	// 准备 actions 用于响应组件中的动作
   	const actions = {
   	jia() {
   	console.log('jia被调用了')
   	}
   	}
   	// 准备 mutations 用于操作数据（state）
   	const mutations = {}
   	// 准备 state 用于存储数据
   	const state = {
   	sum: 0
   	}
   	//
   	export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   	})

   点击查看控制台输出

   点击 +，actions 中的方法被调用。

   actions 中的方法有两个参数，打印参数

3. 在 mutations 中写方法，一般在 actions 中调用 commit 方法时，要大写方法名，对应 mutations 中也大写方法名

   	import Vue from 'vue'
   	import Vuex from 'vuex'
   	Vue.use(Vuex)
   	// 准备 actions 用于响应组件中的动作
   	const actions = {
   	jia(context, value) {
   	context.commit('JIA', value)
   	}
   	}
   	// 准备 mutations 用于操作数据（state）
   	const mutations = {
   	JIA() {
   	console.log('mutations中的JIA被调用了')
   	}
   	}
   	// 准备 state 用于存储数据
   	const state = {
   	sum: 0
   	}
   	//
   	export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   	})

   控制台输出，

   mutations 中的函数也会有两个参数，打印参数，观察输出

4. #