zoukankan      html  css  js  c++  java
  • 【vue store的使用方法】(this.$store.state,this.$store.getters ,this.$store.dispatch ,this.$store.commit)

    vue 页面文件

    <template>
        <div>
          {{this.$store.state.count}}<br/>
          {{count}}<br/>
          {{this.$store.getters.changeCount}}<br/>
          <el-button type="primary" @click="add">主要按钮</el-button>
        </div>
    </template>
    
    <script>
    import {mapState} from 'vuex'
    export default {
      name: 'home',
      computed: {
        ...mapState([
          'count'
        ])
      },
      methods: {
        add () {
          this.$store.dispatch('addFun', 10) // actions
        this.$store.commit('add',10) //mutations
    } }, mounted: { } } </script> <style scoped> </style>

    store文件

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    const store = new Vuex.Store({
      state: {
        count: 1
      },
      getters: {
        changeCount: state => {
          return state.count + 1
        }
      },
      mutations: {
        add (state, n) {
          state.count = state.count + n
        }
      },
      actions: {
        addFun (context, n) {
          context.commit('add', n)
        }
      }
    })
    export default store
    

      

    http://www.axios-js.com/zh-cn/docs/

  • 相关阅读:
    2019年第二周作业
    2019年pta作业第二题——求最大值及其下标
    2019春第十一周作业
    2019春第十周作业
    2019年寒假作业3
    2019年寒假作业2
    2019年寒假作业1
    我的老师
    自说
    Day16
  • 原文地址:https://www.cnblogs.com/ximiximi-blog/p/11670419.html
Copyright © 2011-2022 走看看