vuex简单使用。
项目结构:
1:首先在项目中新建store.js文件,.js文件内容如下:
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0
},
getters:{
addcountgetters(state){
return state.count + 4;
}
},
mutations:{//相当于methods,定义一些方法(同步)。方法里有个默认参数--state
addcount(state){
state.count++;
},
subcount(state){
state.count--;
}
},
actions:{//异步操作(也可以定义同步方法)。提交mutation,而不是直接变更状态。
addcountasync(context){
setTimeout(()=>{
context.commit('addcount');
},1000);//延迟一秒。
}
}
})
2:在main.js中注册store.js文件,js文件内容如下:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false //2019.12.11,全局路由守卫。
router.beforeEach((to,from,next)=>{
console.log(to.path+','+from.path);
if(to.path != '/child'){
next();
}else{
alert('没有权限进入该页面!')
} })
new Vue({
router,//挂载router.js
store,
render: h => h(App),
}).$mount('#app')
3:在views目录下新建Store.vue组件,在该组件中的计算属性中监听,组件内容如下:
<template>
<div>
<!-- <h5 style="backgroudcolor:red">Vuex:{{showstorecount}}</h5> -->
<h5>Vuex:{{showcount}}</h5>
<h5>计算属性:{{showstatevalue}}</h5>
<h5>vuex中的计算属性:getters:{{addcountgetters}}</h5>
</div>
</template> <script>
//import {mapState,mapGetters} from 'vuex'
import {mapState} from 'vuex' export default {
// computed: {//第一种方式。
// showstorecount() {
// return this.$store.state.count;
// }
// },
// computed:mapState({ //第二种,但是这样就使用不了计算属性啦。
// count:state=>state.count,
// showcount:'count' //等于 count:state=>state.count
// })
computed:{
...mapState({//es6 展开。这样既可以用vuex,也可以使用计算属性。
showcount:'count',
}),
// ...mapGetters([//名字和getters中的属于一样时,用数组就可以映射。
// 'addcountgetters'
// ]),
showstatevalue(){//监听中使用计算属性监听vuex中的数据。
return this.$store.state.count*2;
},
addcountgetters(){
return this.$store.getters.addcountgetters;
}
},
}
</script> <style lang="scss" scoped> </style>
4:在主组件App.vue中添加触发store 中mutations定义的同步方法和actions中定义的异步或者同步方法。
<template>
<div id="app">
<!-- <m-parent></m-parent> -->
<button @click="sendmsg">非父子传数据(bus)</button>
<button @click="tohome">home</button> <button @click="addcount">vuex改变state(addcount)</button>
<button @click="subcount">vuex改变state(subcount)</button> <button @click="addcountasync">vuex改变state(addcountasync)</button>
<router-view/>
</div>
</template> <style> </style>
<script>
//import MParent from './views/Parent'
import bus from './until/bus'
export default {
// components: {
// MParent,
// },
methods: {
sendmsg() {
bus.$emit('appsendmsg','I am from app!');
},
tohome(){
this.$router.push({path:'/home'});
},
addcount(){//执行vuex中的同步方法。mutations
this.$store.commit('addcount');
},
subcount(){
this.$store.commit('subcount');
},
addcountasync(){
this.$store.dispatch('addcountasync');
},
},
}
</script>

vuex简单使用。的更多相关文章
- 浅谈vuex使用方法(vuex简单实用方法)
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vu ...
- vuex - 简单使用步骤梳理,轻松掌握、附源码
-----------------------往期----------------------------- vuex - 学习日记 vuex - 辅助函数学习 vuex - 常用命令学习及用法整理 ...
- vue - vue + vue-router + vuex 简单项目
简单的,我的首页,我的笔记项目 vue + vue-router + vuex View + VM(ViewModel) + Model (webpack) vue init webpack lint ...
- vuex简单示例
一.vuex是什么,解决了什么问题? 官方解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生 ...
- (转)Vuex简单入门
今天试了一下Vuex,感觉跟Redux的实现思想类似.再此,简单地总结一下. 什么是Vuex 在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态管理 ...
- 转一篇关于vuex简单理解的文章
学习vuex半天摸不着头脑无意间发现了这篇文章 对vuex做了一个简单的阐述比较有助于我的理解 现在分享出来希望能给一些朋友一点帮助 这个是原文地址 http://www.ituring.com.c ...
- Vue + Vuex 简单使用
我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1 一.mutation 在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mu ...
- Vue状态管理Vuex简单使用
状态管理保存在store\index.js中,简单说明如下 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export def ...
- 使用vuex简单的实现系统中的状态管理
最近项目中用到了vue,其中状态的集中管理使用到了vuex,因此就学习vuex做一个简单的记录.vuex的官方网址如下: https://vuex.vuejs.org/zh-cn/ vuex 当我们 ...
- vuex简单使用
1.创建src/store/index.js----仓库所在地----暴露store 2.main.js入口文件处引入store,挂载到Vue根实例中 3.创建store/movie.js-----电 ...
随机推荐
- java高级——反射
慕课网<反射——Java高级开发必须懂的>听课笔记 一.class类的使用 class ClassDemo { public static void main(String[] args) ...
- pat 1008 Elevator(20 分)
1008 Elevator(20 分) The highest building in our city has only one elevator. A request list is made u ...
- PostGIS 导入SHP文件并与ArcGIS连接
运行环境: ArcGIS10.4 PostGreSql9.4 PostGIS2.2(需勾选空间数据库,否则需要重新安装) 实现步骤: 方法一: 1.打开pgAdminIII,数据库节点上右键,新建数据 ...
- MySQL常用的查询语句回顾
让你快速复习语句的笔记宝典. create table users( username varchar(20) primary key, userpwd varchar(20) ) alt ...
- pdf 在线预览之 pdfobject插件
支持到ie9 可以不用安装 如果安装 npm i pdfobject 第一步:引入pdfObject包 申明一个变量 const { PDFObject } = require("../. ...
- linux中Nginx安装
linux中Nginx安装 编译安装 Nginx的优点太多,这里不再赘述,详情请看这篇博客深入理解nginx. Nginx的安装有rpm包安装.编译安装和docker安装.本文将介绍编译安装方 ...
- 在IOS中实现新浪微博OAuth认证
主要讲解在ios中的认证流程,至于如何得到新浪用户授权账号,地址,这些可以见视频0506. 1.用UIWebView访问新浪授权页面https://api.weibo.com/oauth2/autho ...
- 王院生:Apache APISIX 微服务网关极致性能架构解析
2019 年 10 月 27 日,又拍云联合 Apache APISIX 社区举办 API 网关与高性能服务最佳实践丨Open Talk 杭州站活动,Apache APISIX PPMC 成员王院生做 ...
- sqlserver查询(子查询,全连接,等值连接,自然连接,左右连,交集,并集,差集)
--部门表 create table dept( deptno int primary key,--部门编号 dname ),--部门名 loc )--地址 ); --雇员表 create table ...
- 部署高可用 schduler
目录 创建 kube-scheduler 证书和私钥 创建和分发 kubeconfig 文件 创建 kube-scheduler 配置文件 创建kube-scheduler启动文件 启动kube-sc ...