20181204——Vuex实践

Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件。
由于Vue SPA应用的模块化，每个组件都有它各自的数据(state)、界面(view)、和方法(actions)。这些数据、界面和方法分布在各个组件中，当项目内容变得越来越多时，每个组件中的状态会变得很难管理。这是vuex就派上用场啦~下面我们看一个简单的vuex例子。

单个组件中的状态
假如只是在单个组件中要改变界面view很简单，只需要改变state数据源即可。如下代码：

<template>
    <div>
      view: {{ count }}
      <button @click="increment">increment</button>
    </div>
</template>

<script>
export default {
  // state
  data () {
    return {
      count: 0
    }
  },
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

多个组件中的状态
然而，我们作为组件化的SPA应用，必定会牵扯到多个组件间的通信。
比如有两个相同的组件A和B，它们共享一个数据count，并且都有一个方法可以操作这个count，我们使用vuex来写。

<template>
  <div>
    {{ $store.state.count }}
    <button @click="increment">increment</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment () {
        this.$store.commit('increment')
        //这里利用methods事件来触发Vuex中的commit事件，
      }
    }
  }
</script>

可以看到，这里的两个increment按钮点击都会同时改变两个count的数据，因为数据源count和方法increment都是全局的。
正如下面官方原理图所画的，我们把全局数据源state、改变数据源的方法mutations、异步操作方法actions都放提取出来放到store中，实现全局数据状态单独管理的功能。

安装与配置
方式与上一讲的路由差不多
import包之后，用Vue.use()来使用这个Vuex
然后构造函数是new Vuex.Store

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

Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
  // 存储状态值
  state: {
    ...
  },
  // 状态值的改变方法,操作状态值
  // 提交mutations是更改Vuex状态的唯一方法
  mutations: {
    ...
  },
  // 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数
  getters: {
    ...
  },
  actions: { 
    ...
  }
})
// 要改变状态值只能通过提交mutations来完成

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  // 将store实例注入到根组件下的所有子组件中
  store
  // 子组件通过this.$store来方位store
})

核心概念
** state**
state就是全局的状态（数据源），我们可以用以下方式在Vue 组件中获得Vuex的state状态
template

 <div>
    {{ $store.state.count }}
  </div>

** getters**

getters其实可以认为是 store 的计算属性，用法和计算属性差不多。
定义getter：

  getters: {
    done(state) {
      return state.count + 5;
    },
  }

使用getter

console.log(this.$store.getters.done)

mutations
mutations是操作state的唯一方法，即只有mutations方法能够改变state状态值。
mutations对state的操作

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

组件通过commit提交mutations的方式来请求改变state
this.$store.commit(‘increment’)

** 提交载荷（Payload）**

mutations方法中是可以传参的，具体用法如下：

 mutations: {
    // 提交载荷 Payload
    add(state, n) {
      state.count += n
    }
  },

this.$store.commit('add', 10)

actions
基本操作
之前说mutations方法必须只能是同步方法，为了处理异步方法，actions出现了。关于action和mutations的区别有以下几点：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
Action 还是得通过 mutation 方法来修改state
同样是之前的increment方法,我们分别用同步和异步的action来验证上面所说的与mutations的不同之处：

actions: {
    increment (context) {
      context.commit('increment')
    },
    incrementAsync (context) {
      // 延时1秒  
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },

20181204——Vuex实践

猜你喜欢