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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
浅谈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 COOKIE设置为浏览器进程
2009/06/21 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python利用正则表达式提取字符串
2016/12/08 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
教师节商场活动方案
2014/02/13 职场文书
离职报告范文
2014/11/04 职场文书
文化大革命观后感
2015/06/17 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python