时间:2020年09月11日 | 作者 : aaronyang | 分类 : vue2.X | 浏览: 164次 | 评论 0 人
继续在第2篇文章下面继续写
vuex:vuex用来保存需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,用于各组件间的值传递。
官方地址:查看
官方说法:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
打开main.js, 接下来,按下Ctrl+ ~
安装vuex
直接这样写会报错
你需要
npm install vuex --save
然后打开main.js注册一下
import Vue from 'vue' import App from './App.vue' import routers from './router' import store from './store' Vue.config.productionTip = false new Vue({ router:routers, store:store, render: h => h(App), }).$mount('#app')
增加一个store文件夹
然后下面新建一个index.js
查看官网
写入
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 1, isLogin: false, data3: 333 }, getters: { getData1: function(state) { return state.count + 1; } }, mutations: { addCount(state, num) { state.count = state.count + num; } }, actions: { addFun(context, num) { context.commit('addCount', num) } } })
打红框的地方,是约定的。
黄匡也是约定的参数写法。
这里简单列举了下。
然后我们在component文件夹下面,新增stu.vue,然后
在router/index.js配置路由
stu.vue添加页面代码,先别管vue的语法,双括号,就是说可以加一些脚本代码了。 @click也别管,类似js的onclick
<template> <div > <p> <button @click="add1">按钮1</button> </p> <h3>{{this.$store.state.count}}</h3> </div> </template> <script> export default { name: 'stu', methods:{ add1(){ this.$store.dispatch('addFun',2); } } } </script>
然后跑起来,单击按钮,按钮下的 1,每次+2,就变3了,然后5.。。
具体感觉就像绑定了,这也是vue最基本的。没有像jquery,找到这个h3,然后修改innertext。
这里
this.$store.dispatch('addFun',2);
this.$store.dispatch这几个都是固定的,你也可以
你也可以
getters里面的getData1是每次state.count+1;
接下来测试个好玩的。
修改helloworld的vue代码:
<template> <div> <h1>{{ msg }}</h1> <p> <button @click="add1">按钮helloworld</button> </p> <h3>{{this.$store.state.count}}</h3> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: String }, methods:{ add1(){ this.$store.dispatch('addFun',2); } } } </script>
然后修改router/index.js
把history模式换成hash模式
然后刷新浏览器
单击按钮1 5次
画面如下
接着修改浏览器地址:http://localhost:8080/#/helloworld
发现一进来就是5,不是1,单击按钮helloworld,则每次加2
这玩意感觉只要不刷新浏览器的什么东西,通过中间的 store/index.js文件,然后各个组件间可以相互操作和属性共享。也就是上面说的状态保存。
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
暂时先接入到这里了。具体深入后面再弄。
推荐您阅读更多有关于“”的文章
合肥科大智能常年招聘.NET,Web前端,有想换工作的私聊我和AY交流
抖音号:wpfui,可以看到我的很多作品效果,私活合作请qq联系我
AYUI8社区版Github地址:前往获取
作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司和AY交流
高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活
声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱
不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo
查看捐赠AYUI7.X MVC教程 更新如下:
第一课 第二课 程序加密教程vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV
vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF
额 本文暂时没人评论 来添加一个吧
发表评论