Vuex从入门到精通(二)

前言

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

来完成一个 小型demo的制作(点击按钮,计数器自增)。

环境搭建

vue-cli & webpack

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

vue init webpack counter

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

cnpm

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

命令行输入 :

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

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

使用cnpm 安装项目依赖 :

cnpm install

安装Vuex :

cnpm i vuex -S

启动项目服务 :

npm start

项目开发

目录结构

源代码

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: '<App/>',
  components: { App }
})

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

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

<template>
  <div>
    <h1>counter: {{counter}}</h1>
    <button @click="addCounter">add counter</button>
  </div>
</template>

<script>
  import { mapMutations, mapGetters } from 'vuex'

  export default {
    name: 'Counter',
    computed: mapGetters([
      'counter'
    ]),
    methods: mapMutations([
      'addCounter'
    ])
  }
</script>

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

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

使用方式 :

<script>
  import { mapMutations, mapGetters } from 'vuex'

  export default {
    name: 'Counter',
    computed: mapGetters([
      'counter'
    ]),
    methods: mapMutations([
      'addCounter'
    ])
  }
</script>

或者

<script>
  import { mapMutations, mapGetters } from 'vuex'

  export default {
    name: 'Counter',
    computed: mapGetters({
      counter: 'counter'
    }),
    methods: mapMutations({
      addCounter: 'addCounter'
    })
  }
</script>

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

<script>
  import { mapMutations, mapGetters } from 'vuex'

  export default {
    name: 'Counter',
    computed: {
      ...mapGetters([
        'counter'
      ]),
      selfProperty () {
        return 'self property'
      }
    },
    methods: {
      ...mapMutations([
        'addCounter'
      ]),
      selfMethod () {
        return 'self method'
      }
    }
  }
</script>

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

<template>
  <div id="app">
    <counter></counter>
  </div>
</template>

<script>
  import Counter from './components/Counter.vue'
  export default {
    name: 'app',
    components: {
      Counter
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行结果

最后

本节源码 : 

https://github.com/lonelydawn/counter

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子墨的前端日常

react-navigation 使用笔记 持续更新中

React-Navigation是目前React-Native官方推荐的导航组件,代替了原用的Navigator。最近开始接触,做个笔记

13240
来自专栏CRPER折腾记

React 折腾记 - (6) 基于React 16.6 + Antd 3.10.7封装的一个声明式的查询组件

根据ctype渲染的控件有Input,Button,Select,DatePicker,Cascader,Radio

18910
来自专栏Java学习网

Chrome开发者工具的小技巧

 Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可...

42440
来自专栏老马寒门IT

jQuery EasyUI 详解

easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。

56710
来自专栏我和未来有约会

建立可扩展的silverlight 应用框架 step-6

整理导航模块“LeftNav” 首先说一下我想要实现的效果。 我希望在左侧的导航点击了以后右侧的主体部分发声变化。 之前我在LeftNav模块用的控件是Togg...

218100
来自专栏强仔仔

利用js实现输入框动态提示信息

为了提高和用户的交互性,现在的输入框往往都采用输入信息自动提示的功能,类似于百度输入框中的提示功能。 设计思路是:在输入框input的组件下面放置一个div,这...

76860
来自专栏hbbliyong

C#基础知识回顾--委托事件

在上一篇看到他我一下子就悟了---委托,被人狂喷。说写的太空,没有什么内容之类的。所以准备在这里重写下,不过还是按着以前的方式尽量简单的写。这里我们以打篮球为...

35940
来自专栏GIS讲堂

基于Arcgis for Js的web GIS数据在线采集简介

在前一篇博文“Arcgis for js之WKT和geometry转换”中实现了wkt和geometry之间的相互转化,博文原文地址为:http://blog....

15220
来自专栏谢易成的专栏

Vue服务端渲染之cookie,user-agent获取

Vue服务端渲染有个参数runInNewContext,之前我们这个参数一直设置为true,这样可以全局获取到直出的context。

1.2K20
来自专栏青青天空树

MFC--响应鼠标和键盘操作

  一.  理解鼠标事件.之前对鼠标事件的认识仅仅局限于处理控件的单击与双击事件.但实际鼠标的操作包含很多.这里将以一个画图的小程序讲解对鼠标的响应.

13810

扫码关注云+社区

领取腾讯云代金券