前端开发

从一个改写后的vue小应用认识vuex

2017-03-17  本文已影响4033人  寻也丶

学习vue也有一段时间了，我相信在学习vue的过程不可避免地会接触到状态管理器的概念——也就是vuex。那么，我们首先需要明确的一个概念，到底状态是指什么？其实你完全可以把它理解成某个对象的属性，那么什么又是对象的属性呢？我想这个不用我再一次的解释了吧。好了，简单介绍完状态，下面进入正题，我们通过一个小例子来剖析vuex中的几个核心概念：State、Getters、Mutations、Actions、Modules.

State

在/vuex/modules/下新建一个note.js文件，然后写入以下内容

import * as types from '../mutation-types'
// 整个应用的state
const state = {
notes: [],// 所有的笔记
activeNote: {}// 当前的笔记
}
// mutations
const mutations = {
  [types.ADD_NOTE](state) {
    const newNote = {
      text: 'New note',
      favorite: false 
    };
    state.notes.push(newNote);
    state.activeNote = newNote;
  },
  [types.EDIT_NOTE](state, text) {
    state.activeNote.text = text;
  }
}
// getters
const getters = {
  notes: state => { return state.notes },
  activeNote: state => { return state.activeNote }
}

export default {
  state,
  mutations,
  getters
}

整个应用只有两个state，一个是所有笔记列表，储存在一个数组对象中；一个是当前的笔记对象。
那么我们组件如何拿到整个应用的state呢？我们在/vuex/目录下新建一个store.js文件，写入：

import Vue from 'vue'
import Vuex from 'vuex'
import note from './modules/note'
import actions from './actions'
Vue.use(Vuex)

export default new Vuex.Store({
// 其实这里完全可以不用modules，为了学习的完整性我改写的时候使用了modules
  modules: {
    note
  },
  actions
})

然后在入口文件main.js中将store注入到整个App应用中：

import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'

new Vue({
  store, 
  el: '#app',
  components: { App }
})

现在让我们回到NoteList组件中，我们可以有四种方法获取state:

// 方法一：
computed: {
    notes() {return this.$store.state.note.notes},
    activeNote() {return this.$store.state.note.activeNote}
  }
// 方法二：
computed: mapState({
    notes: state => state.note.notes,
    activeNote: state => state.note.activeNote
  })

除去上面提到的两种方法之外，我们还可以利用在modules定义的getters来获取相应的state。引用官方所言：有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数（因此，getters可以被认为是store的计算属性），以下两种方法使用getters来获取state，这样的做法严格上来说是违背getters的使命的，因为我们仅仅是获取store中的state而没有进行某些‘过滤’操作，当然如果你喜欢这么做，那也未尝不可。代码如下：

方法一：
computed: {
     notes() {return this.$store.getters.notes},
     activeNote() {return this.$store.getters.activeNote}
  }
方法二：
computed: {
    ...mapGetters([
        'notes', 'activeNote'
      ])
  }

Getters

上面我们就提到了getters的使用场景，那我们回过头来细说。使用getters可以从store中的state派生出一些状态（其实跟computed的作用是一样一样的），下面就官方文档里的例子作个说明：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

在这个例子中，我们需要得到done: true的todos列表记录，那么我们就可以使用getters做一些条件过滤的操作，返回我们需要的数据。此外Getters还可以接受其他getters作为第二个参数：

getters: {
  // 基于上面的getters，获取完成的todo条数
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

那么，我们如何在组件中使用getters呢？其实在上面获取state的时候我们就已经提到如何使用：

computed: {
    // 方法一：
     notes() {return this.$store.getters.notes},
     activeNote() {return this.$store.getters.activeNote},
   // 方法二：当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给辅助函数传一个字符串数组。
  ...mapGetters([
        'notes', 'activeNote'
      ])
    // 当然，你也可以重命名，使用对象形式
  mapGetters({
        noteList: 'notes',
        getActiveNote: 'activeNote'  
    })
  }

Mutations

这里我也使用官方文档上的来做个简单的说明，如文档所说，更改store中的状态唯一的方法是提交mutation。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

在组件中提交Mutations:
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
Tips: 要记住mutation必须是同步函数，异步操作我们可以放在actions，实际上我们为了统一，可以把所有操作放在actions.js文件中便于查看。

Actions

actions与mutation的区别：

组件中触发action:

methods: {
    updateActiveNote(note) {
        this.$store.dispatch('updateActiveNote', note)
      }
  }

上面只有一个actions，所以没有用mapActions()辅助方法，如果你想了解如何使用mapActions()，可以参考前面所述的关于获取store中state的部分，用法都是一样的，在这里就不再赘述。

Modules

引入modules是为了将store分割成各个模块，比如在一个博客应用里，有文章列表（ArticleList）、文章详情（ArticleDetail）、登录（Login）、评论（Comment）等模块组成，这时候清晰的模块结构划分，便于我们针对某个module 更明确的状态分析。

export default new Vuex.Store({
  modules: {
    note
  },
  actions
})

前面一开始，我是把note作为一个module传入store对象中的，这样一来note模块下的state（局部状态）是整个应用state对象的一个子集，也就是作为state的属性存在，描述的关系如下：

const state = {
    note: {
        notes: [],
        activeNote: {}
    }
}

因此，我们想要在组件内获取局部状态的时候是这样获取的（获取note模块下的notes）：

computed: {
    notes() {return this.$store.state.note.notes},
    activeNote() {return this.$store.state.note.activeNote}
  }
// 当我们需要获取多个状态的时候，重复上述的方法显得有点麻烦，所以我们这时候就可以考虑使用mapState()等辅助方法来帮助我们简化代码

Tips:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

结语：

本次介绍vuex使用了coligo写的例子，原先使用的vuex版本是1.0的，学习完vue，我用vuex2.0重新写了一遍，算是巩固知识，也对vue有了更深入的认识。也欢迎大家看看我重写后的notes-app，这里是线上demo地址。在Segmentfault社区也有人翻译的作者所写的关于这个Notes App的教程说明，推荐给大家。
原文：Learn Vuex by Rebuilding a Notes App
译文：用Vuex构建一个笔记应用

上一篇下一篇

猜你喜欢

热点阅读