做后台项目的时候,有时候会需要用到状态管理,VUEX就能够很好的为我们解决好这个问题。

安装 VUEX

npm install vuex --save

具体使用:

建立 src/store/index.js

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex); const store = new Vuex.Store({
state:{
count:1
},
getters:{
getStateCount:function(state){
return state.count +1;
}
},
mutations:{
add(state){
state.count += 1;
},
reduce(state){
state.count -= 1;
}
}
}) export default store

main.js文件

import store from './store'

接下来我们就可以写 vuex 的业务代码了

我们在视图上绑定这个 count

<p>store中的state的count值:{{this.$store.state.count}}</p>

Getters:

Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果

视图使用:

<p>store中的state的count值:{{this.$store.getters.getStateCount}}</p>

Mutations

数据我们在页面是获取到了,但是如果我们需要修改count值怎么办?如果需要修改store中的值唯一的方法就是提交mutation来修改。

例如:我们现在Hello World.vue文件中添加两个按钮,一个加1,一个减1;这里我们点击按钮调用addFun(执行加的方法)和reductionFun(执行减法的方法),然后在里面直接提交mutations中的方法修改值:

这样就解决了,改变改变store里面值的方法。

Actions:

上面使用 Mutations 能够修改 store 里面的值,但是官方并不建议我们这样做,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改index.js文件,先定义actions提交mutation的函数:

使用方式:

methods:{
addFun(){
// this.$store.commit('add');
this.$store.dispatch('addFun');
},
reduceFun(){
// this.$store.commit('reduce');
this.$store.dispatch('reduceFun');
},
}

这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的。

以上就是我们实现 vuex 的一个过程。

拓展修改状态:我们可以利用这个属性来做数据状态的改变

参考:昆明网站建设

https://baijiahao.baidu.com/s?id=1618794879569468435

vue-vuex的使用的更多相关文章

  1. vue+vuex初入门

    Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...

  2. 我的音乐盒子(nodejs7 + koa2 + vue + vuex + vue-router)

    你们知道的,nodejs对jser来说,是个好东西,快快的,自从接触nodejs后,总想弄点东西. 这弄个啥了,一天打开百度音乐盒,哟,自己弄一个如何了,好啊好啊. 后台: nodejs 7 + ko ...

  3. use vue vuex vue-router, not use webpack

    vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...

  4. [ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统

    好久没写文字了,当然大家也不期待嘛,反正看代码就行了. 演示网站 首先说下这个项目吧. 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架. 我们先来看看首页吧 ...

  5. vue vuex vue-rouert后台项目——权限路由(超详细简单版)

    项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...

  6. 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  7. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  8. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

  9. vuejs学习——vue+vuex+vue-router项目搭建(二)

    前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...

  10. vuejs学习——vue+vuex+vue-router项目搭建(一)

    前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪 ...

随机推荐

  1. vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误

    在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...

  2. Linux标准IO和管道

    Linux标准IO和管道 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.标准输入和输出 程序:指令+数据 读入数据:Input 输出数据:Output 打开的文件都有一个fd: ...

  3. $(...) is null

    删冲突插件,jquery作为基础库,当然是没有理由被删了.这个方法最直接了. (2)将jquery的$方法改名,具体改名方法如下: jQuery.noConflict();//将变量$的控制权让渡给给 ...

  4. Codeforces E. Weakness and Poorness(三分最大子列和)

    题目描述: E. Weakness and Poorness time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  5. gcc的__builtin_函数(注意前面是两个下划线)

    说明: GCC provides a large number of built-in functions other than the ones mentioned above. Some of t ...

  6. The 16th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple (Mirror)

    B题 思路 因为 \[ x=\sum\limits_{k=1}^{n}ka_k\\ y=\sum\limits_{k=1}^{n}ka_{k}^{2} \] 我们设交换前和交换后的这两个等式的值设为\ ...

  7. postgres主从基于流复制

    环境: CentOS Linux release 7.6.1810 (Core) 内核版本:3.10.0-957.10.1.el7.x86_64 node1:192.168.216.130 node2 ...

  8. python写入excel(方式1)

    import xlsxwriter li=["张三","李四","王五","周六","王琪",&qu ...

  9. 爬虫 - 解析库之Beautiful Soup

    了解Beautiful Soup 中文文档: Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式 ...

  10. 多项式求逆入门 板题(Luogu P4238)

    下面是代码,推导详见 传送门 模板Code #include <cstdio> #include <cstring> #include <algorithm> us ...