zoukankan      html  css  js  c++  java
  • 真正掌握vuex的使用方法(二)现在有的小伙伴是不是在想,以后如果我要在这里写自己的计算属性怎么办?怎么办?咱们可以通过对象合并的方法去实现。 通过Object.assign()合并对象:

    从上篇文章当中相信大家已经对vuex有了一些大概了解了,接下来咱们结合实例来继续敲代码吧!切记一定要动手实操练习一遍!

    接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票”按钮,相应的票数会发生加1的变化,另外总票数为所有票数之和,如图所示:

    1、首先通过vue-cli生成一个名字叫做demo的项目

    vue init webpack demo

    2、项目搭建完成以后,安装vuex

    npm install vuex --save

    3、在src目录下创建vuex文件夹,然后在该文件夹下创建一个名字叫做store的js文件 

    4、在store.js中写入以下代码:

    import Vue from 'vue';//引用vue
    import Vuex from 'vuex';//引用vuex
    Vue.use(Vuex);//使用vuex
    const state={
        nodeVoteCount:0,//node的初始票数
        vueVoteCount:0,//vue的初始票数
    }
    export default new Vuex.Store({////暴露Store对象
        state
    })

    5、在main.js当中引入在store.js文件当中创建的store对象,并在Vue实例中添加

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './vuex/store'//导入store.js
    Vue.config.productionTip = false
    new Vue({
        el: '#app',
        router,
        store,//添加store
        components: { App },
        template: '<App/>'
    })

    6、修改App.vue为:

    <template>
      <div id="app">
          <!--通过$store.state.nodeVoteCount获得nodeVoteCount的状态值
              通过$store.state.vueVoteCount获得vueVoteCount的状态值-->
          <div><h2>总票数:{{$store.state.nodeVoteCount+$store.state.vueVoteCount}}</h2></div>
          <div>
              <img src="./assets/node.png">
              <h3>如何通过node.js对数据进行MD5加密</h3>
              <input type="button" value="投票">票数:{{$store.state.nodeVoteCount}}
          </div>
          <hr/>
          <div>
              <img src="./assets/vuex.png">
              <h3>真正掌握vuex的使用方法(一)</h3>
              <input type="button" value="投票">票数:{{$store.state.vueVoteCount}}
          </div>
      </div>
    </template>
    <script>
    export default {
      name: 'App'
    }
    </script>

    7、到现在为你,初始的票数已经被咱们获取到了。 
    不过有心的你应该已经发现了:当获得vuex状态值的时候代码好长,好啰嗦,好不方便!不过没关系,vuex为伟大的你提供了一种十分简便方法。 
    - 首先在App.vue当中的script内引入vuex

    import vuex from "vuex";

    • 然后在computed计算属性里写如下代码:
    computed:vuex.mapState(["vueVoteCount","nodeVoteCount"])
    或
    computed:vuex.mapState({//mapState方法最终返回的是一个state对象。
        vueVoteCount:state=>state.vueVoteCount,
        nodeVoteCount:(state)=>state.nodeVoteCount
    })
    • 再然后修改App.vue的template为:
      <div id="app">
          <!--是不是很方便?直接写状态名称即可-->
          <div><h2>总票数:{{nodeVoteCount+vueVoteCount}}</h2></div>
          <div>
              <img src="./assets/node.png">
              <h3>如何通过node.js对数据进行MD5加密</h3>
              <input type="button" value="投票">票数:{{nodeVoteCount}}
          </div>
          <hr/>
          <div>
              <img src="./assets/vuex.png">
              <h3>真正掌握vuex的使用方法(一)</h3>
              <input type="button" value="投票">票数:{{vueVoteCount}}
          </div>
      </div>

    经过上面的代码调整以后,你会发现调取vuex的状态值简便了不少。 
    不过设置mapState也要花费一些精力。 
    那么咱们再通过ES6的知识再将上面的JS部分进行一番优化。 
    - 首先咱们将引入的vuex那部分修改为:

    import {mapState} from "vuex";//通过ES6的对象解构赋值
    • 然后在使用mapSate的时候,咱们就可以省略一级对象(vuex),即computed修改为:
    computed:mapState(["vueVoteCount","nodeVoteCount"])
    或
    computed:mapState({
        vueVoteCount:state=>state.vueVoteCount,
        nodeVoteCount:(state)=>state.nodeVoteCount
    })
      • 现在有的小伙伴是不是在想,以后如果我要在这里写自己的计算属性怎么办?怎么办?咱们可以通过对象合并的方法去实现。 
        通过Object.assign()合并对象:
    //Object.assign()方法的第一个参数为目标对象,其余参数为源对象。
    //通过该方法可以将所有源对象的值copy到目标对象。
    //该方法的返回值即为这个目标对象
    computed:Object.assign(mapState(["vueVoteCount","nodeVoteCount"]),{
        //自己的计算属性可以在这里面写哦
    }),
    //
    computed:Object.assign(mapState({
        vueVoteCount:state=>state.vueVoteCount,
        nodeVoteCount:(state)=>state.nodeVoteCount
    }),{
       //自己的计算属性可以在这里面写哦
    })

    当然也可以用…(扩展运算符)来合并对象

    computed:{
        ...mapState(["vueVoteCount","nodeVoteCount"]),
        ...{
            //自己的计算属性可以在这里面写哦
        }
    }
    //
    computed:{
        ...mapState({
            vueVoteCount:state=>state.vueVoteCount,
            nodeVoteCount:(state)=>state.nodeVoteCount
        }),
        ...{
            //自己的计算属性可以在这里面写哦
           }
    }
  • 相关阅读:
    sublime开启vim模式
    git命令行界面
    搬进Github
    【POJ 2886】Who Gets the Most Candies?
    【UVA 1451】Average
    【CodeForces 625A】Guest From the Past
    【ZOJ 3480】Duck Typing
    【POJ 3320】Jessica's Reading Problemc(尺取法)
    【HDU 1445】Ride to School
    【HDU 5578】Friendship of Frog
  • 原文地址:https://www.cnblogs.com/catbrother/p/9397272.html
Copyright © 2011-2022 走看看