VUE store 开发（二）

本文部分内容来自网络，经过消化整理而成。

第一部分介绍了store的概念，和简单的例子

下边说说在实际使用过程中的一些具体内容

一、 使用感受

1、基本使用流程

参看下列图，来进行介绍

 

• 一个组件执行时，通过调用store.dispatch触发actions
• action可以提交（commit）一个mutations，action中可以有任何的异步操作
• 在mutations中，可以改变state
• state的变化，触发组件（当前组件或者其他组件）值的变化

状态的获取和设置

1、 获取：

可以通过 store.state 来获取状态对象

console.log(store.state.count) 

2、 设置 

通过 store.commit 方法触发状态变更

store.commit('increment')

3、 响应

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

 

4、 例子：

在组件中的例子 

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

 

 

二、actions的用法

1、dispatch一个commit

const actions = {
  addVisitedView({ commit }, view) {
    commit('ADD_VISITED_VIEW', view)
  }
}

正常情况下，一个actions是提交一个dispatch，这个dis 

2、dispatch一个dispatch（继续dispatch）

const actions = {
  addView({ dispatch }, view) {
    dispatch('addVisitedView', view)
  }
​​​​​​​}

addView这个actions在dispatch的时候，有两个参数，第一个参数还是dispatch，说明还要继续dispatch

3、 dispatch一个commit和state

const actions = {
 delVisitedView({ commit, state }, view) {
    return new Promise(resolve => {
      commit('DEL_VISITED_VIEW', view)
      resolve([...state.visitedViews])
    })
  }
​​​​​​​}