第一步當然還是安裝了，這里只介紹npm的安裝方法，別的請自行百度。
npm install vuex --save
第二步就是調用，我在src文件夾簡歷了個store.js的文件，方便管理。然后在main.js里面引入
import store from "./store";
new Vue({
store,
render: h => h(App)
}).$mount("#app");
至此，安裝基本完成，下面介紹這個東西的用法。vuex的好處我也不多說了，簡單來說就是數據共享嘛，反正誰用誰知道。不要以為你的項目小就可以不用這個，它可以讓你在開發中省掉很多事兒。
現在我的文件是這樣的（項目框架是vue-cli3.0）：
接下來就開始在store里面寫東西啦。其實這東西用法簡單的一比，就是幾個屬性而已。最常用的就這四個:state,mutations,actions,getters.
state就是存死數據的，當然下面也可以改它的數據.
1.store
在store.js里面:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
box: 123
}
});
然后在你的組件里面引入一下(我這里直接引用了這四個家伙，實際開發的時候你用到啥引用啥就好，不然eslint又該出紅線了)
import {
mapGetters,
mapState,
mapMutations,
mapActions
} from "vuex";
然后在計算屬性里面寫
computed: {
...mapState(["box"])
},
接下來在template里面直接調用，這個數據是共享的，在每一個組件里面想用都可以直接這么引入調用(加個點擊事件，下面要用下)
<div class="page">
{{box}}
</div>
<button @click="btn">按鈕</button>
哈哈，界面里面估計都已經顯示了123了吧。就是這么簡單。
2.mutations
接下來看mutations，這個屬性主要是修改store存儲的值的，就比如說剛才那個box，就可以用這個玩意兒修改。
在store里面接着上面的寫
export default new Vuex.Store({
state: {
box: 123
},
mutations: {
someMutation(state, count) {
state.box += count;
}
}
});
這個里面有兩個參數，state,count，state就是上面那個state，count就是你要傳入的數據，當然，你不傳東西也可以，只是個方法而已。我這隨便寫了個案例。
接下來在你的組件里面的調用，這里調用是在methods里面寫，畢竟人家是方法嘛，對吧！
...mapMutations(["someMutation"]),
btn(){
this.someMutation(22);
}
這里我傳了個值為22，寫在了點擊事件里面，然后就是開始點擊,相信你現在看到已經變成145了。
3.actions
actions里面也是兩個參數, 例如在store.js里面這么寫：
actions: {
getbox2(context,s) {
return context.box;
}
}
我們可以通過第一個參數context來獲取state或者getter里面的值，context.state或者context.getters直接就可以獲取第二個參數s，就是我們傳的值。
在組件里面我們直接這么寫
methods:{
...mapActions(["getbox2"]),
...mapMutations(["someMutation"])
}
然后直接調用
mounted(){
this.getbox2(1234).then((res)=>{
console.log(res)
})
}
這里打印出來的是根據剛才在store里面返回的值有關，
getbox2(context,s) {
return context.box;
}
這樣返回的就是123，若是
getbox2(context,s) {
return s;
}
這么寫返回的就是你傳入的那個s，打印出1234.
actions還可以直接調用mutations的方法。例如
getbox2(context) {
return context.commit('someMutation');
}
然后在組件中直接調用
this.getbox2()
這樣就直接運行了someMutation這個方法。值得一提的是actions是異步的，就是你想怎么用，想在哪用都是可以的。簡單來說，就是你想改變state的值，就用mutations，如果你想用方法，就用actions
4.getters
getters就更加簡單啦，直接在store里面，例如：
getters: {
getbox(state) {
return 1;
}
}
然后在組件的計算屬性里面這么寫：
computed: {
...mapGetters(["getbox"]),
...mapState(["box"])
},
然后在template里面直接拿來用，
<div class="page">
{{ getbox }}
{{box}}
<button @click="btn">按鈕</button>
</div>
簡單來說，這東西就是vuex里面的計算屬性，跟computed一個尿性。里面的state就是上面那個state。最終代碼是這樣的：
組件中:
<template>
<div class="page">
{{ getbox }}
{{box}}
<button @click="btn">按鈕</button>
</div>
</template>
<script type="text/ecmascript-6">
import {
mapGetters,
mapState,
mapMutations,
mapActions
} from "vuex";
export default {
data() {
return {
count:0
}
},
components: {
},
computed: {
...mapGetters(["getbox"]),
...mapState(["box"])
},
methods:{
...mapActions(["getbox2"]),
...mapMutations(["someMutation"]),
btn(){
this.someMutation(22);
},
},
mounted() {
// this.getbox2().then((res)=>{
// console.log(res)
// })
this.getbox2()
},
}
</script>
<style scoped lang="stylus">
</style>
在store.js中：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
box: 123
},
mutations: {
someMutation(state, count) {
// state.box += count;
state.box++;
}
},
actions: {
getbox2(context) {
return context.commit('someMutation');
}
},
getters: {
getbox(state) {
return state.box;
}
}
});
main.js中：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
好了，大功告成，相信你們對這個所謂的狀態管理工具有一定的了解了。有啥寫的不太好的地方，請大家多多指教。