vuex插件

vuex介绍

vuex是vue的一个插件，一个库，简单来说: vuex是对应用中组件的状态进行集中式的管理(读/写)的，即状态自管理应用

github站点: github站点在线文档:
在线文档：在线文档

vuex作用：实现多组件共享状态

我们知道在一个大型的项目中，往往多个视图依赖于同一状态(同一个数据对象)，或者来自不同视图的行为需要变更同一状态(一个数据发生改变，所有依赖这个数据的页面需要同步更新)

• 上述问题的以前的解决办法
  • 将数据以及操作数据的行为都定义在父组件
  • 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)
• 上述问题的现在的解决办法：vuex

vuex的核心概念

• state：vuex管理的状态对象,它应该是唯一的,语法如下：

const state = {
    xxx: initValue
}

• mutations：包含多个直接更新state的方法(回调函数)的对象，触发对象是: actions中的commit('mutation名称')，它只能包含同步的代码, 不能写异步代码，语法如下：

const mutations = {
    yyy (state, data) { 
        // 更新state的某个属性
    }
}

• actions：包含多个事件回调函数的对象，通过执行: commit()来触发mutation的调用, 间接更新state，触发对象是组件中: $store.dispatch('action名称') // 'zzz'，它可以可以包含异步代码(定时器, ajax)等。语法如下：

const actions = {
		zzz ({commit, state}, data1) {
			commit('yyy', data2)
		}
	}

• getters：包含多个计算属性(get)的对象，读取对象是组件中：$store.getters.xxx，语法如下：

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

vuex状态自管理应用

主要是以下三者的关系的联系

• state：驱动应用的数据源==>data数据
• view：以声明方式将state映射到视图==>以大括号的形式显示到页面中
• actions：响应在view上的用户输入导致的状态变化(包含n个更新状态的方法函数)

vuex结构图

vuex引入项目中

1. 下载: npm install vuex --save
2. 使用vuex：代码如下

1.store.js
    import Vuex from 'vuex'
    export default new Vuex.Store({
        state,
        mutations,
        actions,
        getters,
        modules
    })
2.main.js
    import store from './store.js'
    new Vue({
        store
    })