当前位置:网站首页 / vue2.X / 正文

【AY】从C#转web前端之路记录[3]-vuex浅接入

时间:2020年09月11日 | 作者 : aaronyang | 分类 : vue2.X | 浏览: 27次 | 评论 0


继续在第2篇文章下面继续写

vuex:vuex用来保存需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,用于各组件间的值传递。

官方地址:查看

官方说法:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。


打开main.js, 接下来,按下Ctrl+ ~

安装vuex

直接这样写会报错

image.png

你需要

npm install vuex --save

image.png

然后打开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')

image.png


增加一个store文件夹

然后下面新建一个index.js

image.png


查看官网

image.png

写入

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)
        }
    }
})

打红框的地方,是约定的。

image.png

黄匡也是约定的参数写法。


这里简单列举了下。



然后我们在component文件夹下面,新增stu.vue,然后

在router/index.js配置路由

image.png


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.。。

image.png

具体感觉就像绑定了,这也是vue最基本的。没有像jquery,找到这个h3,然后修改innertext。

这里

 this.$store.dispatch('addFun',2);

this.$store.dispatch这几个都是固定的,你也可以

image.png

你也可以

image.png

getters里面的getData1是每次state.count+1;

image.png


接下来测试个好玩的。

修改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模式

image.png


然后刷新浏览器

http://localhost:8080/#/stu/

image.png

单击按钮1  5次

画面如下

image.png

接着修改浏览器地址:http://localhost:8080/#/helloworld

image.png

发现一进来就是5,不是1,单击按钮helloworld,则每次加2



这玩意感觉只要不刷新浏览器的什么东西,通过中间的 store/index.js文件,然后各个组件间可以相互操作和属性共享。也就是上面说的状态保存。


====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========



暂时先接入到这里了。具体深入后面再弄。




推荐您阅读更多有关于“”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和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

标签列表