Vuex 使用及简单实例(计数器)


Posted in Javascript onAugust 29, 2018

前一段时间因为需要使用vue,特地去学习了一下。但是时间匆忙vuex没有接触到,今天闲暇时看了解了一下vuex,并做了一个小demo,用于记录vuex的简单使用过程。

什么是Vuex?

vuex是专门为vue.js应用程序开发的一种状态管理模式,当多个视图依赖于同一个状态或是多个视图均可更改某个状态时,将共享状态提取出来,全局管理。

引入Vuex(前提是已经用Vue脚手架工具构建好项目)

1、利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

要注意的是这里一定要加上 ?save,因为你这个包我们在生产环境中是要使用的。

2、新建一个store文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。

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

3、使用我们vuex,引入之后用Vue.use进行引用。

Vue.use(Vuex);

通过这三步的操作,vuex就算引用成功了,接下来我们就可以尽情的玩耍了。

4、在main.js 中引入新建的vuex文件

import storeConfig from './vuex/store'

5、再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
 })

下面是一个计数器的例子

在src目录下创建一个store文件夹。

src/store.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
 count: 0,
 show: ''
 },
 getters: {
 counts: (state) => {
  return state.count
 }
 },
 mutations: {
 increment: (state) => {
  state.count++
 },
 decrement: (state) => {
  state.count--
 },
 changTxt: (state, v) => {
  state.show = v
 }
 }
})

export default store

state就是我们的需要的状态,状态的改变只能通过提交mutations,例如:

handleIncrement () {
  this.$store.commit('increment')
 }

带有载荷的提交方式:

changObj () {
  this.$store.commit('changTxt', this.obj)
 }

当然了,载荷也可以是一个对象,这样可以提交多个参数。

changObj () {
  this.$store.commit('changTxt', {
   key:''
  })
 }

在main.js中引入store.js

import store from './store/store'
export default new Vue({
 el: '#app',
 router,
 store,
 components: {
 App
 },
 template: '<App/>'
})

在组件中使用

在组建可以通过$store.state.count获得状态

更改状态只能以提交mutation的方式。

<template>
<div class="store">
 <p>
 {{$store.state.count}}
 </p>
 <el-button @click="handleIncrement"><strong>+</strong></el-button>
 <el-button @click="handleDecrement"><strong>-</strong></el-button>
 <hr>
 <h3>{{$store.state.show}}</h3>
 <el-input
 placeholder="请输入内容"
 v-model="obj"
 @change="changObj"
 clearable>
 </el-input>
</div>
</template>
<script>
export default {
 data () {
 return {
  obj: ''
 }
 },
 methods: {
 handleIncrement () {
  this.$store.commit('increment')
 },
 handleDecrement () {
  this.$store.commit('decrement')
 },
 changObj () {
  this.$store.commit('changTxt', this.obj)
 }
 }
}
</script>

到这里这个demo就结束了,

Vuex 使用及简单实例(计数器)

感觉整个个过程就是一个传输数据的过程,有点类似全局变量,但是vuex是响应式的。

这里当然并没有完全发挥出全部的vuex,

vuex还在学习中,写这篇文章主要是记录其简单的使用过程。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
JS 类型转换常见方法小结
May 31 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
浅谈Vue.use的使用
Aug 29 #Javascript
微信小程序支付前端源码
Aug 29 #Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 #Javascript
javascript中UMD规范的代码推演
Aug 29 #Javascript
详解webpack自定义loader初探
Aug 29 #Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 #Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 #Javascript
You might like
php切割页面div内容的实现代码分享
2012/07/31 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
php获取图片信息的方法详解
2015/12/10 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python对数据库操作
2016/03/28 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
深圳茁壮笔试题
2015/05/28 面试题
行政工作个人的自我评价
2014/02/13 职场文书
三方协议书范本
2014/04/22 职场文书