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,超强推荐base.js
Dec 23 Javascript
JS 控制CSS样式表
Aug 20 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
python转换摩斯密码示例
2014/02/16 Python
python批量生成本地ip地址的方法
2015/03/23 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python设置环境变量的作用整理
2020/02/17 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
小学一年级评语大全
2014/04/22 职场文书
核心价值观演讲稿
2014/05/13 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Node.js实现断点续传
2021/06/23 Javascript