VUE之状态管理VUEX

使用VUEX的必要性

1.各种父组件、子组件之间传递变量随着组建的增多越来越麻烦
2.父子组件传递数据的方式是单向的(比如在子组件中改变data必须要使用事件冒泡的方式)
3.路由router：
我们在使用router的时候，由于组件只维护自身的状态，组建被创建或者进入路由时它们被初始化，从而导致data销毁
这个时候只使用router.param或者router.query来传递变量是远远不够的
比如在最近一个项目中就需要在菜单导航栏切换的时候需要使用同一个userInfo，这个时候来回传递变量是非常麻烦的
Vue由于不会维护window的全局变量，然而全局变量是有很强的副作用的

VUEX的基本结构

state

数据源，也就是各种共享变量

view

将state映射到视图，也就是在template模板上引用state变量

actions

响应在view上用户操作导致的state变化

Store是vuex的全局配置

安装vuex

npm install vuex

基本使用：

// main.js文件中：
import Vuex from 'vue'
import Vue from 'vuex'

Vue.use(Vuex)

//声明一个store
const store = new Vuex.Store{
	state: {
		count: 1
	}
}

//将store加入到全局vue中
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

然后就可以在每个组件中使用this.$store.state来使用vuex

store中的结构

export default {
	state: {},      // 共享变量(data)
	getters: {},    // 读取器，类似store的计算属性，在获取某个状态值前可以进行计算(computed)
	actions: {},    // actions，向store发出调用通知，执行本地或者远端的某一个操作(methods)
	mutations: {},  // 修改器，用来修改data中的变量
	modules: {},    // 模块，向store注入其他子模块
	strict: true,   // 设置vuex的运行模式  true调试模式，false为生产模式
	plugins []
}