zoukankan      html  css  js  c++  java
  • store封装

    state.js

    let count = 100
    let name = 'ronle'
    let time = '2019'
    
    export default {
      count,
      name,
      time
    }

    mutations.js

    export default {
      changThis (state, num) {
        // 将state的值改变为传递过来的外部的值
        state.count = num
      }
    }

    index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state,
      mutations,
      getters: {
        showCount: function (state) {
          return 'count:' + state.count
        }
      }
    })

    页面上使用

    import {mapState, mapMutations, mapGetters} from 'vuex'
    
    computed: {
        ...mapState(['count']),
        ...mapState({
          name: 'name',
          time: 'time'
        }),
        ...mapGetters(['showCount'])
    },
    methods: {
        ...mapMutations(['changThis']),
        submit () {
          this.changThis(this.num)
          // 等价于
          // this.$store.commit('changThis', this.num)
        }
      }
    <p>{{this.count}}</p>
    <p>{{this.name}}
    <p>{{this.time}}</p>
    <p>{{this.showCount}}</p>
    <button @click="submit">查询</button>
      
  • 相关阅读:
    [CERC2015]Digit Division
    [SDOI2012]拯救小云公主
    [不知道出自什么OJ]最大利润
    [USACO08FEB]修路Making the Grade
    P1985 [USACO07OPEN]翻转棋
    P1156 垃圾陷阱
    奶酪
    扫描线
    php数组
    php switch
  • 原文地址:https://www.cnblogs.com/ronle/p/11461969.html
Copyright © 2011-2022 走看看