首先需要安裝vuex

npm install vuex --save

然后再src中件store 文件夾，并創(chuàng)建index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

接下來(lái)再main.js中引入store，然后注入一下，之后就可以在任何一個(gè)組件中

import store from './store/index'
export const app=new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

this.$store.state.data 。。獲取數(shù)據(jù)，數(shù)據(jù)操作了
然后回到store/index.js 文件中 創(chuàng)建 state 變量

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={//要設(shè)置的全局訪問(wèn)的state對(duì)象
     showFooter: true,
     changableNum:0
     //要設(shè)置的初始屬性值
   };
 const store = new Vuex.Store({
       state
    });
 
export default store;

Vuex官方提供了api getters 和vue中的計(jì)算屬性compouted來(lái)實(shí)時(shí)監(jiān)聽(tīng)state的值

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要設(shè)置的全局訪問(wèn)的state對(duì)象
     showFooter: true,
     changableNum:0
     //要設(shè)置的初始屬性值
   };
const getters = {   //實(shí)時(shí)監(jiān)聽(tīng)state值的變化(最新?tīng)顟B(tài))
    isShow(state) {  //方法名隨意,主要是來(lái)承載變化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //方法名隨意,主要是用來(lái)承載變化的changableNum的值
       return state.changebleNum
    }
};
const store = new Vuex.Store({
       state,
       getters
});
export default store;

改變vuex中的數(shù)據(jù)就需要用到mutations，mutattions也是一個(gè)對(duì)象

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要設(shè)置的全局訪問(wèn)的state對(duì)象
     showFooter: true,
     changableNum:0
     //要設(shè)置的初始屬性值
   };
const getters = {   //實(shí)時(shí)監(jiān)聽(tīng)state值的變化(最新?tīng)顟B(tài))
    isShow(state) {  //承載變化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //承載變化的changebleNum的值
       return state.changableNum
    }
};
const mutations = {
    show(state) {   //自定義改變state初始值的方法，這里面的參數(shù)除了state之外還可以再傳額外的參數(shù)(變量或?qū)ο?;
        state.showFooter = true;
    },
    hide(state) {  //同上
        state.showFooter = false;
    },
    newNum(state,sum){ //同上，這里面的參數(shù)除了state之外還傳了需要增加的值sum
       state.changableNum+=sum;
    }
};
 const store = new Vuex.Store({
       state,
       getters,
       mutations
});
export default store;

這時(shí)候你完全可以用 this.store.commit('hide') 以this.store.commit('newNum',sum)方法,兩個(gè)組件里用執(zhí)行得到的值，每次都是一樣的。
官方api 還提供了actions，對(duì)象變量，最大的作用就是里面的Action方法 可以包含任意異步操作，這里面的方法是用來(lái)異步觸發(fā)mutations里面的方法，actions里面自定義的函數(shù)接收一個(gè)context參數(shù)和要變化的形參，context與store實(shí)例具有相同的方法和屬性，所以它可以執(zhí)行context.commit(' '),

 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要設(shè)置的全局訪問(wèn)的state對(duì)象
     showFooter: true,
     changableNum:0
     //要設(shè)置的初始屬性值
   };
const getters = {   //實(shí)時(shí)監(jiān)聽(tīng)state值的變化(最新?tīng)顟B(tài))
    isShow(state) {  //承載變化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //承載變化的changebleNum的值
       return state.changableNum
    }
};
const mutations = {
    show(state) {   //自定義改變state初始值的方法，這里面的參數(shù)除了state之外還可以再傳額外的參數(shù)(變量或?qū)ο?;
        state.showFooter = true;
    },
    hide(state) {  //同上
        state.showFooter = false;
    },
    newNum(state,sum){ //同上，這里面的參數(shù)除了state之外還傳了需要增加的值sum
       state.changableNum+=sum;
    }
};
 const actions = {
    hideFooter(context) {  //自定義觸發(fā)mutations里函數(shù)的方法，context與store 實(shí)例具有相同方法和屬性
        context.commit('hide');
    },
    showFooter(context) {  //同上注釋
        context.commit('show');
    },
    getNewNum(context,num){   //同上注釋，num為要變化的形參
        context.commit('newNum',num)
     }
};
  const store = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
});
export default store;

而在外部組件里進(jìn)行全局執(zhí)行actions里面方法的時(shí)候，你只需要用執(zhí)行

this.$store.dispatch('hideFooter')

或this.$store.dispatch('showFooter')

以及this.$store.dispatch('getNewNum'，6) //6要變化的實(shí)參

原文鏈接：https://segmentfault.com/a/1190000015782272