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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
一些mootools的学习资源
Feb 07 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Vue组件实现触底判断
Jun 26 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Python发送邮件的实例代码讲解
2019/10/16 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
工程安全员岗位职责
2014/03/09 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
专业见习报告范文
2014/11/03 职场文书
2014年车间工作总结
2014/11/21 职场文书
2015年材料员工作总结
2015/04/30 职场文书
通知怎么写?
2019/04/17 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python