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 相关文章推荐
Javascript 面试题随笔
Mar 31 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
vue.js循环radio的实例
Nov 07 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
vscode中Vue别名路径提示的实现
Jul 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 foreach、while性能比较
2009/10/15 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
化学实验员岗位职责
2013/12/28 职场文书
高校十八大报告感想
2014/01/27 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
java多态注意项小结
2021/10/16 Java/Android
利用Python实现Picgo图床工具
2021/11/23 Python
vue使用element-ui按需引入
2022/05/20 Vue.js
mysql幻读详解实例以及解决办法
2022/06/16 MySQL