Vuex从入门到实战(二)

由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex：我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools，无需配置即可访问时光旅行。

前言

如果你对vuex状态管理还不是很了解的话，请先阅读

Vuex从入门到实战(一)

在本篇，我将演示如何使用

• vue-cli ( https://github.com/vuejs/vue-cli )
• Vue ( https://cn.vuejs.org/v2/guide/ )
• Vuex ( https://vuex.vuejs.org/zh-cn/intro.html )

来完成一个 小型demo的制作（点击按钮，计数器自增）。

环境搭建

vue-cli & webpack

在任意目录下打开控制台, 输入

vue init webpack counter

image

中间的项目可以随便填选，但最后一项是否自动安装依赖一定要选 No

cnpm

npm 依赖有一些是国外的，安装比较慢还容易出错误.

命令行输入 :

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装国内淘宝镜像源的cnpm.

使用cnpm 安装项目依赖 :

cnpm install

安装Vuex :

cnpm i vuex -S

启动项目服务 :

npm start

项目开发

目录结构

image

源代码

1. 建立store, 存放在store.js

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

// Vue 引入Vue插件方式
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 0
  },
  getters: {
    counter: state => state.counter
  },
  mutations: {
    addCounter (state) {
      state.counter ++
    }
  }
})

2. 修改webpack的入口文件 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入建立好的 store
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
// 绑定到 Vue 实例上
  store,
  template: '',
  components: { App }
})

将store绑定到Vue实例上之后，可以在每个组件中 使用 this.$store 进行操作.

3. 建立 计数器 组件 Counter.vue

当然, Vuex 提供了 一种 十分友好的方式让组件引用store 中的属性和方法 :

• getters 对应 mapGetters
• mutations 对应 mapMutations
• actions 对应mapActions

使用方式 :

或者

如果methods和computed中 存在组件的私有属性和方法, 那么可以使用 ES6 对象展开运算符

4. 在 根组件 上挂载 Counter， App.vue

运行结果

image

image

最后

本节源码 :

https://github.com/lonelydawn/counter

下一节我们将探讨一个更复杂的案例， 实战用户需求

Vuex从入门到精通(三)