初学Vuex

Vuex 是什么？（https://vuex.vuejs.org/zh-cn/intro.html）

官方文档！！！必须深入理解

1. what is it?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. why

3. Use 

1.  src 下新建store.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const state= {

    count: 0 

};

const mutations={

    INCREMENT(state){

        state.count++;

    },

    EVENADD(state) {

        state.count+=2;

    }

};

const actions={

    increment({commit}){

        // ajax,promise

        setTimeout(() => {

            commit('INCREMENT');

        },1500)

    },

    evenadd({commit,state}){

        if( state.count%2 === 0) {

            commit('EVENADD')

        }else{

            console.log('数字不合法！')

        }

    }

};

const getters={

    c(state){

        return state.count;

    }

}

export default new Vuex.Store({

    state,

    getters,

    mutations,

    actions

}) 

2. 在main.js中 import store 

import Vue from 'vue'

import App from './App'

import store from './store'

// Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  store,

  components: { App },

  template: ''

})

3.  App.vue

<template>

    <div  id="app">

        <h3>Welcome vue </h3>

        <input type="button" value="add" @click="increment">

        <input type="button" value="evenadd" @click="evenadd">

        <div>{{ c }}</div>

    </div>

</template>

<script>

  import { mapGetters,mapActions } from 'Vuex';

  export default{

    // methods:{

    //  increment(){

    //    // alert(1)

    //    this.$store.dispatch('increment');

    //  },

    //  evenadd(){

    //    this.$store.dispatch('evenadd');

    //  }

    // }

    methods:mapActions([

      'increment',

      'evenadd'

    ]),

    computed: mapGetters([

      'c'

    ])

  }

</script>