码迷,mamicode.com
首页 > 其他好文 > 详细

vuex 精简demo解析

时间:2019-09-20 16:58:40      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:his   addition   from   ret   dem   文件   turn   建议   compute   

1.store/index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'

//使用vuex
Vue.use(Vuex);

//一个store  , Vuex.store的 实例
const store = new Vuex.Store({
    state: {
        count : 1
    },
    getters:{            //  Getter相当于vue中的computed计算属性
        getStateCount: function(state) {
            return state.count + 1;
        }
    },
    mutations: {
        addition(state) {
            state.count = state.count + 1;
        },
        reduction(state) {
            state.count = state.count - 1;
        }
    },
    actions: {      //注册actions,类似vue里面的methods
        //通过这个修改state里面的值
        // 可以直接用mutations修改,但是官方建议使用actions去调用mutations去修改
        addition(context) {
            context.commit("addition");
        },
        reduction(context){
            context.commit("reduction");
        }
    }
})

export default store

main.js

import store from './store/index'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

App.vue

下面是vuex:this.$store.state.count 获得的数据:
    <h2>{{  this.$store.state.count  }}</h2>
    下面是vuex:this.$store.getters.getStateCount获得的数据:   
    <h2>{{ this.$store.getters.getStateCount }}</h2>

    <button @click="addS">+</button>
    <button @click="reduceS">-</button>
export default {
    methods:{
        addS() {
            //this.$store.commit("addition");
            this.$store.dispatch("addition");
        },
        reduceS() {
            //this.$store.commit('reduction');
            this.$store.dispatch("reduction");
        }
    }
  };

总结:

  1. vuex 功能和总线bus插件类似.对全局状态(数据)进行管理
  2. 使用dispatch调用actions中的方法,actions中的方法使用commit 调用mutations中的方法。
    在mutations中进行实际数据的修改。
  3. getters: Getter相当于vue中的computed计算属性 state : 里面装所有的状态(数据)

vuex 精简demo解析

标签:his   addition   from   ret   dem   文件   turn   建议   compute   

原文地址:https://www.cnblogs.com/whyaza/p/11557949.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!