Vuex

2019年9月14日 148次阅读 来源: DraWarrior

为什么使用Vuex

在学习Vuex之前，先了解一下“单向数据流”

《Vuex》

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。(比如请求数据或者修改数据会导致数据源状态改变)

但是遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏，而且特别不方便。
如果坚持使用，传参的方法对于多层嵌套的组件将会非常繁琐，各种各样的问题通常会导致无法维护的代码。

所以我们把组件的共享状态抽取出来，以一个全局单例模式管理(惰性单例的设计模式)
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

对，Vuex核心就是它的store，其中，有三个重要的部分，
State：
通过它存取多个组件共享的数据
Mutations：
通过这个对象中的方法，可以改变State中的数据，但在这之前，必须通过显式地提交(commit) 来触发其中的方法。
Actions：
提交mutation，可以包含任意异步操作
这一步不是必要的，前提是你不需要异步操作，例如ajax请求数据，

Vuex的使用和理解

以下内容基于vue-cli写的，请先完成这一步

通常Vuex会单独写在一个js文件中，

store.js

// 引入vue 和 vuex 模块
import Vue from 'vue'
import Vuex from 'vuex'
// 中间件，使用VueX作为Vue的一个参数
Vue.use(Vuex)

数据，类似组件中的data

const state = {
  // count: 0
}

计算属性，类似组件中的computed

const getters = {
  // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

用户派发的行为，类似methods

const actions = {
  // increment: ({commit}) => commit('increment')
}

必须通过这一步来修改数据

const mutations = {
  // increment: ({count}) => {
  //   state.count++
  // }
}

导出这个对象

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

然后在main.js的Vue实例中，注册一个store(仓库)

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

接下来从组件(视图)开始，理解一下这个过程

Vue-component:

用户的特定行为(需要使用Vuex的情况) 会派发一个任务给Actions 或者直接给Mutations

写在App.vue组件中
HTMT

<div @click="add">
  {{ count }}
</div>

JS

methods: {
  add () {
    // 派发一个任务，叫做'increment'
    this.$store.dispatch('increment')
  }
}

Actions:

Actions是用户指定的行为，这里没有异步操作，所以直接commit到Mutations

const actions = {
  // const { commit } = store
  // commit === store.commit
  increment: ({commit}) => commit('increment')
  // es6的写法，它等同于这样：
  // increment ({commit}) {
  //   commit('increment')
  // }
}

Mutations:

Mutations如上所述，修改一下state的数据

const mutations = {
  increment: ({count}) => {
    state.count++
  }
}

state:

state的数据被改变

Vue-component:

最后回到了组件这里，通过计算属性获取到改变的数据并显示到页面上

count () {
  return this.$store.state.count
}

getters

另外，我们希望实现这么一个小的效果：count为偶数时为绿色，奇数时为红色，那么我们在store中通过getters实现(当然在组件中通过计算属性也可以实现，这里只是为了说明getters的作用)

const getters = {
  // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

在App.vue中的computed中写上

evenOrOdd (state) {
  return this.$store.getters.evenOrOdd
}

在模板中补充一点：

:class="evenOrOdd"

和对应的css：

.even {
  color: green;
}
.odd {
  color: red;
}
    原文作者：DraWarrior
    原文地址: https://segmentfault.com/a/1190000012070824
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞