Vuex从入门到精通(二)
时间:2022-04-27
本文章向大家介绍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
中间的项目可以随便填选,但最后一项是否自动安装依赖一定要选 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
下一节我们将探讨一个更复杂的案例, 实战用户需求
- ruby学习笔记(10)-puts,p,print的区别
- Linux下的Mongodb部署应用梳理
- Ocelot API网关的实现剖析
- ruby学习笔记(9)-别名(alias)与方法取消(undef,remove_method)
- Pupet自动化管理环境部署记录
- ruby学习笔记(8)-"静态方法的4种写法"与"单例方法的2种写法"
- Puppet常识梳理
- linux下增加磁盘改变指定文件路径分区挂载点和迁移数据
- 手动编写的几个简单的puppet管理配置
- 选择一款适合自己的ruby on rails IDE开发工具
- 微信的两种用途
- Sqlite快速上手使用指南
- 自动类型安全的.NET标准REST库refit
- 实现WebSocket和WAMP协议的开源库WampSharp
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 新版Flutter集成到已有Android项目的实现
- PHP基于session.upload_progress 实现文件上传进度显示功能详解
- Android实现加法计算器
- Android使用Realm数据库实现App中的收藏功能(代码详解)
- Android实现简单加法计算器
- Android实现两个数相加功能
- 基于Android studio3.6的JNI教程之ncnn之语义分割ENet
- android计算器实现两位数的加减乘除
- android studio实现简单考试应用程序实例代码详解
- Kotlin 实现按钮点击跳转监听事件方式
- Android使用剪切板传递数据
- kotlin anko页面跳转实现方式,携带参数或flag
- 关于android连续点击出现多个Activity界面的解决方法
- Android Studio使用recyclerview实现展开和折叠功能(在之前的微信页面基础之上)
- 解决django 多个APP时 static文件的问题