vue的 状态自管理应用——vuex

vuex——为了解决多组件共享状态的问题

状态自管理应用

• state: 驱动应用的数据源
• view: 以声明方式将 state 映射到视图
• actions: 响应在 view 上的用户输入导致的状态变化(包含 n 个更新状态的方法)

下载: npm install vuex --save

vuex的属性store拥有多个对象

• vuex管理的状态对象——state

//它应该是唯一的
const state = {
	xxx: initValue
}

• 包含多个直接更新state的方法(回调函数)的对象——mutations

//谁来触发: action中的commit('mutation名称')
 const mutations = {
	yyy (state, data) { 
		// 更新state的某个属性
	}
}

• 包含多个事件回调函数的对象——action

//通过执行: commit()来触发mutation的调用, 间接更新state
 const actions = {
	zzz ({commit, state}, data1) {
		commit('yyy', data2)
	}
}

• 包含多个计算属性(get)的对象——getter

 const getters = {
	mmm (state) {
		return ...
	}
}

使用vuex

1.store.js

	import Vuex from 'vuex'
	export default new Vuex.Store({
		state,
		mutations,
		actions,
		getters
	})

2.main.js

import store from './store.js'
new Vue({
	store
})`

store对象之间的联系

在组件使用store对象

方法一

1. 所有用vuex管理的组件中都多了一个属性$store, 它就是一个store对象
2. 属性:

state: 注册的state对象

this.$store.state.nnn

getters: 注册的getters对象

 this.$store.getters.mmm

3. 方法:

dispatch(actionName, data): 分发action

  this.$store.dispatch("yyy");

方法二

 {{xxx}} {{mmm}} @click="zzz(data)"

 import {mapState, mapGetters, mapActions} from 'vuex' 
 export default { 
 	computed: { 
 		...mapState(['xxx']), 
 		...mapGetters(['mmm']), }
 	methods: mapActions(['zzz'])
  }

当然啦最好是官网的资源la

1. github
2. 在线文档