Vue之Vuex

在Vuex的教程中提到，一些概念：

• mutation是改变state的唯一途径。
• mutation只能是同步的，action可以包含异步代码。

我们想要改变state，只能通过mutation,而action想要改变state则需要commit mutation,那为什么又需要那么复杂的方式呢？为什么不直接通过mutation来改变呢。原因就在于他们的执行方式，mutation只能是同步的，也就是说触发的mutation会及时响应state的改变；而action如果是在异步代码中commit mutation来改变state,这样的改变就具有了不可预测性。然而异步编程在实际应用中是非常有用和重要，所以action就是为了异步编程而生的，mutation的作用就是用来改变state。

执行顺序

在不同的模块或者组件中声明了相同名称的muation、action,他们都会被添加到store的mutations属性对象和actions属性对象下，以数组的形式存储在此对象下。当这个名字的muation或者action被触发的时候，这个同名数组的的所有的函数都会被执行。这种方式使得app可以对相同的操作做出多种响应。

在上面的例子中，我在不同的模块中分别声明的同名的ADD_NOTE mutation和action。因此他们在store实例下面被分别添加到_mutations和_actions的ADD_NOTE 数组中。当我们在代码中去commit _mutations中的ADD_NOTE 时，会逐一执行数组中的函数。同理，当我们在代码中去dispatch _actions中的ADD_NOTE 时，会逐一执行数组中的函数。

数组中函数的执行顺序与包含这些mutation和action的模块的注册顺序相同。

在上面的例子中,无论什么情况都会在顶层的mutations和actions中声明的函数。然后才会按照modules中注册模块的顺序去执行。

上面的例子更改了顺序，但跟再上面的例子执行顺序无异。只有将modules里面模块的顺序更改了，执行顺序才会有所变化。

这个的执行顺序还是先执行mutations或者actions中的函数，然后则是toolbar -> noteslist -> editor.

名称空间namespace

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。有时候我们不想要模块的东西被注册到根模块下面，这时候就可以使用名称空间。我们在模块的内部使用一个namespaced的boolean属性来表示是否使用名称空间，如下：

export default {
  namespaced: true, //true表示
  mutations,
  actions
};

使用名称空间后，模块中的包含的getter,mutation,action在根模块中注册的名字都会加上这个名称空间：

getter:

action:

mutation:

名称已经发生变化，当然在使用的时候也不能按照以前的方式调用。

• getter

  如果你希望在getter中使用全局 state 和 getter，getter 会接收rootState 和 rootGetter 作为第三和第四参数传入。

const getters = {
  getNote (state, getters, rootState, rootGetters) {}
};

action

如果你希望在**action**中使用全局 state 和 getter，action 会接收一个含有rootState 和 rootGetters 的contex对象。

const actions = {
     // 在这个模块中， dispatch 和 commit 也被局部化了
    ADD_NOTE ({ dispatch, commit, getters, rootGetters }) {
        dispatch('ADD_NOTE', null, {root: true});//调用根模块action的ADD_NOTE
        commit('ADD_NOTE', null, {root: true});//调用根模块mutation的ADD_NOTE
    }
}

contex对象

除此之外我们还可以直接通过加名称空间的mutation和action来直接使用。

this.$store.commit('toolbar/ADD_NOTE');

this.$store.dispatch('toolbar/ADD_NOTE');

this.$store.state.toolbar.note;

官方教程中有如下：

首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

上面的这几句话虽简短，却需要细细品味。store.dispatch()方法是有处理Promise的能力的，并且仍旧返回一个Promise。此方法是用来触发action的，因此能够处理并返回一个Promise的前提就是action要返回一个Promise。

现在你可以：

store.dispatch('actionA').then(() => {
  // ...
})

由于actionA中返回的是一个Promise，并且经过store.dispatch操作后仍旧返回了一个Promise,因此这里可以直接在后面使用.then操作，这样就可以达到异步也是顺序执行的目的。

在另外一个 action 中也可以：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

实操如下：

在一个执行删除的action中返回了一个Promise,这个Promise内部是一个执行删除的ajax请求，请求执行完成后分发一个改变state的mutation,当这些操作全部执行完成后再执行后面的操作。

//action:
export const DELETE_NOTE = ({commit}, note) => {
  return new Promise((resolve, reject) => {
    axios({
      url: 'http://localhost:9090/notes/' + note.id,
      method: 'DELETE'
    })
    .then((res) => {
      console.log('删除成功');
      commit(types.DELETE_NOTE, note);
      resolve();
    }, (res) => {
      console.log(res);
      console.log('删除失败');
      reject();
    })
    .catch((res) => {
      console.log('抛出错误');
    });
  });
};

//....触发
    deleteNote (note) {
        let index = this.$store.state.notes.indexOf(note);
        this.$store
          .dispatch(types.DELETE_NOTE, note) //触发action
          .then(() => { //等待action中的异步操作完成，然后执行
            console.log('dsadas');
            let len = this.$store.state.notes.length;
            if (len > 0) {
              if (index > len - 1) {
                index = len - 1;
              }
            } else {
              index = -1;
            }
            let newNote = this.$store.state.notes[index];
            console.log(newNote === note);
            this.$store.commit(types.SET_ACTIVE_NOTE, newNote);
          });
      },

最后，如果我们利用 async / await 这个 JavaScript 即将到来的新特性，我们可以像这样组合 action：

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

带名称空间的绑定函数

1、mapState
简化前：

computed: {
    ...mapState({
        note: state => state.toolbar.note
    })
}

简化后：

computed: {
    ...mapState('toolbar',  {
        note: state => state.note
    })
}

2.mapGetters, mapMutations, mapActions

简化前：

computed: {
    ...mapGetters({
        note: 'toolbar/getNote'
    })
},
methods: {
    ...mapMutations({
        add: 'toolbar/ADD_Note'
    }),
    ...mapActions({
        addNote: 'toolbar/ADD_Note'
    })
}

简化后：

computed: {
    ...mapGetters('toolbar', {
        note: 'getNote'
    })
},
methods: {
    ...mapMutations('toolbar', {
        add: 'ADD_Note'
    }),
    ...mapActions('toolbar', {
        addNote: 'toolbar/ADD_Note'
    })
}

动态加载模块

注册：
store被创建后，可以使用:

store.registerModule('moduleA',{});
store.registerModule(['moduleA','moduleB'],{});

来动态注册模块。他们分别解析为：store.state.moduleA和嵌套模块：store.state.moduleA.moduleB。它们的getters，mutations以此类推。
注销：

store.unregisterModule('moduleA');

我们可以在组件的钩子函数中动态注册和注销模块：

beforeCreate () {
    this.$store.registerModule('moduleA',{});
}
destoryed () {
    this.$store.unregisterModule('moduleA');
}

除了使用vue本身的钩子来动态加载之外，还可以配合路由插件使用。比如vue-router的导航守卫来实现。

二级标题

三级标题

四级标题

注：