Vue中的Vuex(一)

小编在项目中,经常会使用到Vuex,其实小编自己只是知道Vuex是为了解决什么痛点,但是具体这个东西是怎么回事,小编自己有点迷迷糊糊,昨天小编痛下决心,认认真真的把Vuex的官网(https://vuex.vuejs.org/zh/)读了一遍,收获还是很多的,特地拿出来与大家分享,也希望能在大家今后的面试中,增加一些筹码和信心。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

这个是官网对Vuex的描述,小编之前的项目经常会用Vuex存储用户信息,比如当前用户的id,用户所在部门,头像等等,这些信息都是通过数据接口获得的数据,其实存储在用户浏览器的Cookie和LocalStorage都是可以的,用的时候,再从本地的相应位置获取,用户退出的时候,清空对应的信息,同样也可以较少多次请求,并且也解决了多个组件共享数据的痛点。但是很多成型的admin都在使用Vuex,同样对于另一个前端框架大名鼎鼎的React也在用类似的方案(Redux),面临前端日新月异的发展,学会使用Vuex就显得更为重要。
Vuex主要分为四个部分,State、Getters、Mutations、Actions,小编下面就结合实例一一的解释一下。

在正式进入Vuex的世界之前,我们需要先安装Vuex

npm install vuex --save

在我们使用脚手架构建项目的时候,需要显示的在项目入口文件main.js中引入Vuex,并通过Vue.use()来安装

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Vuex依赖Promise,还不了解Promise的,可以查看小编之前的文章《ES6中的Promise》
一、State
Vuex核心就是一个store,store中的数据都存放在State中,可以将State理解成一个大仓库,大仓库中存着我们需要共享的数据。在组件中,可以通过this.$store获取State中的数据,为了保证数据的一致性,State中数据是不允许直接修改的,改变 store 中的状态的唯一途径就是显式地提交 (commit)

下面我们来创建一个最简单的store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

现在,你可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:

store.commit('increment')
console.log(store.state.count) // -> 1

最后,我们需要把store注入到创建的Vue实例中,就像这样

new Vue({
  el: '#app',
  store // 这个位置因为对象的key和value一样,使用es6语法可以简写成这样
})
那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性(computed)中返回某个状态:
// 创建一个 Counter 组件
const Counter = {
  template: `
{{ count }}
`, computed: { count () { return store.state.count } } } 我们还可以这样 const Counter = { template: `
{{ count }}
`, computed: { count () { return this.$store.state.count } } }

实际上以上内容,我们就可以正常读取store中的值了,官方还提供我们一种更简便的方式:mapState

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

同样,类似es6对象的扩展中,key和value值一样的时候,可以简写,同样,mapState也提供类似的使用方法

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

在es6出现了扩展运算符的之后,我们可以更加简便的写法,也是小编在github上最常见的方式

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

二、Getters
小编个人感觉这个和一些后端语言有类似的地方,比如我们想获取一个store中数组的长度,没有Getters的时候,我们需要在计算属性(computed)这么写

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

这个例子还是相对比较简单的,要是遇上更复杂的情况,在获取到State中数据之后,还要各种处理,想想一坨坨的js代码,头就大,还好,Vuex提供了Getters。我们可以这样写

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: { // 通过Getters将doneTodos暴露出去
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

在获取的时候,这样就可以获取到内容了,就像这样

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getter 也可以接受其他 getter 作为第二个参数:
getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

我们可以很容易地在任何组件中使用它:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

同样,我们还可以让Getters结合es6箭头函数返回一个函数,在实际使用页面中传递参数来获取不同的结果,就类似原生js的过滤器filter一样

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

和上面mapState类似,Getters也提供了类似的方式

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字,使用对象形式:

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

参考文献:https://vuex.vuejs.org/zh/
大家还可以扫描二维码,关注我的微信公众号,蜗牛全栈

你可能感兴趣的