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中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
浅谈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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
一个用php实现的获取URL信息的类
2007/01/02 PHP
php-fpm配置详解
2014/02/12 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
Angular排序实例详解
2017/06/28 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python抽象类的新写法
2015/06/18 Python
python http接口自动化脚本详解
2018/01/02 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python数据类型强制转换实例详解
2020/06/22 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
素食餐饮项目创业计划书
2014/02/02 职场文书
开工仪式主持词
2014/03/20 职场文书
《老山界》教学反思
2014/04/08 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
写给父母的感谢信
2015/01/22 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
趣味运动会广播稿
2015/08/19 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python