zoukankan      html  css  js  c++  java
  • Live2D 看板娘

      vuex是为vue.js开发的状态管理模式,负责vue的状态管理,状态管理是干啥的呢,举个栗子,比如一个酒店,哪间屋子入住了客人,哪间屋子客人退房了,客人退房后,房间有没有清扫过,这些都需要去记录,以便给客人安排房间啊,给员工安排工作什么的,这时就需要这么一个工具,去记录这些状态,vuex做的其实就是这个事情。我们可以使用vuex设置菜单切换时候的状态,还可以用来管理弹幕等等,在单向数据流的应用中,vuex可以对组件进行集中管理,所以说vuex必不可少。

      现在我们来使用一下vuex,还是用上篇文章用的那个使用vue-cli生成的那个工程,在工程中,已经生成了一个名叫store.js的文件,进入这个文件(下面的代码),我们从上往下看,文件先引入了vue和vuex,然后在vue对象上绑定了vuex,在vuex.Store方法里,传递了一个对象,里面有state、mutations和actions三个属性,state就是组件的状态,mutations是改变状态的方法集,直接操作state,而actions则是直接操作mutation,不是直接更改状态。

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
    
      },
      mutations: {
    
      },
      actions: {
    
      },
    });

      然后我们在state里面定义一个状态count,在mutations里面来定义一个执行递增count方法:

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        increase () {
          this.state.count ++
        }
      },
      actions: {
    
      },
    });

      接下来,我们看下在组件中,怎么去使用vuex,首先,要引入store.js文件,然后在default这个对象里面去引用store,打开about.vue组件:

    <template>
      <div class="about">
        <h1>This is an about page</h1>
        <h1>count:{{msg}}</h1>
      </div>
    </template>
    <script>
    import store from '@/store';
    export default {
      name: 'about',
      store,
      data(){
        return {
          msg: store.state.count
        }
      }
    }
    </script>

      最后,使用store.commit这个关键词,去修改count这个状态的值,打开info.vue这个组件,我们在这个组件中添加一个方法,来实现修改状态的功能:

    <template>
      <div class="about">
        <h1>This is an info page</h1>
        <button @click="add">点我状态加一</button>
      </div>
    </template>
    
    <script>
      import store from '@/store';
      export default {
        name: 'Info',
        store,
        methods: {
          add(){
            store.commit('increase');
          }
        }
      };
    </script>

      控制台运行工程,在chrome浏览器中看下效果:

  • 相关阅读:
    June 26th 2017 Week 26th Monday
    June 25th 2017 Week 26th Sunday
    June 24th 2017 Week 25th Saturday
    June 23rd 2017 Week 25th Friday
    June 22nd 2017 Week 25th Thursday
    2018最佳网页设计:就是要你灵感爆棚!!!
    图片素材类Web原型制作分享-Pexels
    想要打动HR的心,UX设计师求职信究竟应该怎么写?
    【UXPA大赛企业专访】Mockplus:“设计替代开发”将成为现实
    2018年最好的医疗网站设计及配色赏析
  • 原文地址:https://www.cnblogs.com/jiangtengteng/p/10438226.html
Copyright © 2011-2022 走看看