vue学习篇3之vuex

vuex

vuex是vue的一个插件。对vue应用中多个组件的共享状态进行集中式的管理（读/写）。是组件间通信方法的一种
一、vue的应用就是一个状态自管理应用
1）state：驱动应用的数据源
2）view：以声明方式将state映射到视图。比如{{name}}声明式
3）actions：响应在view上的用户输入导致的状态变化（n个更新状态的方法）
如图：

二、多组件共享状态的问题
1）多个视图依赖于同一状态。
2）来自不同视图的行为需要变更同一状态。
3）以前的解决办法：
a：将数据以及操作数据的行为都定义在父组件。
b：将数据以及操作数据的行为传递给需要的各个子组件（有可能需要多级传递）
不适合大型的复杂页面应用
4）vuex就是用来解决这个问题的。

三、如何使用vuex
首先建立一个store.js向外暴露store对象

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

然后在main.js中引入store.js映射store

import store from '/store'
new Vue({
  store
})

store对象
1）映射完后所有用vuex管理的组件中都多了一个属性 $store,是一个store对象

2）属性（用来获取数据展现）：
state：注册的state对象。
通过this.$store.state.xxx来访问。

getters：注册的getters对象。
通过this.$store.getters.xxx调用。
3）方法（更新状态、更新界面）：
dispatch(actionName, data)分发调用action

四、vuex核心概念和API
1、state
1）vuex管理的状态对象
2）它应该是唯一的

const state={
  //里面包含具体的状态数据
  name:'Tom'
}

2、mutations
1）包含多个直接更新state的方法（回调函数）的对象。
2）谁来触发：由action中的commit('mutation方法名称', data)。
3）只能包含同步的代码，不能写异步代码。

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

3、actions
1）包含多个对应事件回调函数的对象。
2）通过执行commit()来触发mutation的调用，间接更新state。
3）谁来触发：组件中的事件调用$store.dispatch('action方法名称', data)。
4）可以包含异步代码（定时器、ajax）。

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

4、getters
1）包含多个计算属性（get）的对象。
2）谁来读取：组件中计算属性调用$store.getters.xxx

const getters={
  mm(state, getters){
    return...
  }
}

五、组件中简化语法的使用

import {mapState, mapGetters, mapActions} from 'vuex'
export default {
  computed:{
    ...mapState(['xxx']),
    ...mapGetters(['mmm'])
  },
  methods:mapActions(['zzz'])
  或者methods:{
    ...mapActions(['zzz'])
  }
}
模版中直接用{{xxx}},{{mmm}},@click='zzz(data)’

六、vuex结构分析图