vuex最简单使用版

store/index基础结构缺的可参考最底下

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {  //定义变量stuName,可以定义多个
		stuName: '',
	},
	mutations: {  
		//存取学生姓名 用户通过触发这个方法，来保存数据，payload就是用户存进来的变量，这里赋值给 state.stuName.
		setStuName (state, payload) {
			state.stuName= payload
		},	
		setStuNameneDef (state) {  //这个方法没有payload变量，就是可以不传参数，调用该方法得默认变量名
		    state.stuName = '小明';
		}
	},
})
export default store

存取数据重点

this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state
this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)
this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)

commit: 同步操作

存储 this.$store.commit('setStuName',name)
取值 this.$store.state.stuName
dispatch: 异步操作

存储 this.$store.dispatch('setStuName',name)
取值 this.$store.getters.stuName

Vuex有五个核心概念

　1. state：vuex的基本数据，用来存储变量

   2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

   3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

　　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

  4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

  5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。