Vue.js进修系列二 —— vuex进修实践笔记（附DEMO）

2019年8月25日 195次阅读 来源: VioletJack

上次进修了vue-router的运用，让我能够在各个页面间切换，将页面搭建了起来。此次则要进修vue的状况治理模式——vuex。它相似于redux来运用的全局状况。

注：本文只是个人对vuex进修的一些明白，要深入控制还须要仔细查阅官方文档。

一、基础引见

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

1. 单个组件中的状况

如果只是在单个组件中要转变界面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>

所以，单个组件中的原理图是如许的：

《Vue.js进修系列二 —— vuex进修实践笔记（附DEMO）》

2. 多个组件中的状况

然则，我们作为组件化的SPA运用，必定会牵扯到多个组件间的通讯。
比方有两个雷同的组件A和B，它们同享一个数据count，而且都有一个要领能够操纵这个count，我们运用vuex来写。
A组件和B组件的代码（代码雷同）

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

<script>
  export default {
    methods: {
      increment () {
        this.$store.commit('increment')
      }
    }
  }
</script>

《Vue.js进修系列二 —— vuex进修实践笔记（附DEMO）》

《Vue.js进修系列二 —— vuex进修实践笔记（附DEMO）》

能够看到，这里的两个increment按钮点击都邑同时转变两个count的数据，由于数据源count和要领increment都是全局的。
正以下面官方原理图所画的，我们把全局数据源state、转变数据源的要领mutations、异步操纵要领actions都放提取出来放到store中，完成全局数据状况零丁治理的功用。
《Vue.js进修系列二 —— vuex进修实践笔记（附DEMO）》

二、装置&设置

1. 装置vuex

运用npm装置并保存到package.json中：

npm install vuex --save

package.json

  "devDependencies": {
    ...
    "vuex": "^2.1.1",
    ...
  },

2. 设置

设置体式格局和路由的设置体式格局差不多

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
})

三、中心观点

1. state

state就是全局的状况（数据源），我们能够用以下体式格局在Vue 组件中取得Vuex的state状况
template

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

script

console.log(this.$store.state.count)

2. getters

getters实在能够认为是 store 的盘算属性，用法和盘算属性差不多。
定义getter：

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

运用getter

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

3. mutations

mutations是操纵state的唯一要领，即只要mutations要领能够转变state状况值。

3.1 基础操纵

mutations对state的操纵

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

组件经由过程commit提交mutations的体式格局来要求转变state

this.$store.commit('increment')

如许的优点是我们能够跟踪到每一次state的变化，以便实时剖析和处理题目。

3.2 提交载荷（Payload）

mutations要领中是能够传参的，详细用法以下：

  mutations: {
    // 提交载荷 Payload
    add(state, n) {
      state.count += n
    }
  },
this.$store.commit('add', 10)

这里只是传了一个数字，在大多数情况下，载荷应该是一个对象，如许能够包括多个字段而且纪录的 mutation 会更易读。

3.3 注重

mutations要领必需是同步要领！

4. actions

4.1 基础操纵

之前说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)
    }
  },

不同于mutations运用commit要领，actions运用dispatch要领。

this.$store.dispatch('incrementAsync')

4.2 context

context是与 store 实例具有雷同要领和属性的对象。能够经由过程context.state和context.getters来猎取 state 和 getters。

4.3 以载荷情势分发

    incrementAsyncWithValue (context, value) {
      setTimeout(() => {
        context.commit('add', value)
      }, 1000)
    }
this.$store.dispatch('incrementAsyncWithValue', 5)

5. module

运用单一状况树，致使运用的一切状况集合到一个很大的对象。然则，当运用变得很大时，store 对象会变得痴肥不堪。
为了处理以上题目，Vuex 许可我们将 store 支解到模块（module）。每一个模块具有本身的 state、mutation、action、getters、以至是嵌套子模块——从上至下举行相似的支解：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状况
store.state.b // -> moduleB 的状况

module实在照样关于大型的SPA运用来讲的，临时对module的运用和明白并没有太多，之后会补上这一块儿的内容。
想要相识更多module学问，请查阅官方module文档

Vue.js进修系列

作者近来正在恶补Vue的种种学问，愿望能够体系的控制Vue的开辟学问。有兴致的同砚能够检察之前宣布的文章：
Vue.js进修系列一 —— vue-router2进修实践笔记（附DEMO）
Vue.js进修系列二 —— vuex进修实践笔记（附DEMO）
Vue.js进修系列三——axios和收集传输相干学问的进修实践
Vue.js进修系列四——Webpack打包东西的运用
Vue.js进修系列五 —— 从VUE-CLI来聊聊ESLint

Vue.js进修系列项目地点（项目临时有点乱，之后会举行整顿优化。）

本文源码已收入到GitHub中，以供参考，固然能留下一个star更好啦^-^。
https://github.com/violetjack…

关于作者

VioletJack，挪动、前端工程师，两年挪动端工作经验、一年前端工作经验。现专注于挪动前端的进修和开辟。善于Android开辟和Vue前端开辟。会按期产出关于Android、Vue、挪动前端相干的博文。迎接人人关注我，我会专心保护和运营好博客，多产出高质量文章。同时也愿望我所写的东西能够帮到有须要的朋侪。
新浪微博： http://weibo.com/u/2640909603
掘金：https://gold.xitu.io/user/571…
CSDN: http://blog.csdn.net/violetja…
简书： http://www.jianshu.com/users/…
Github： https://github.com/violetjack

    原文作者：VioletJack
    原文地址: https://segmentfault.com/a/1190000009634594
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞