vuex就是一个公共的仓库，是用来在多个组件之间共享数据的。官方称之为状态管理模式。顾名思义，也就是说，是对组件进行集中式的状态管理
vuex目前是整个vue中非常重要的一个中间件
那么既然vuex是一个管理仓库，那它管理的对象是谁呢？
vuex管理的对象是：shared states （可以共享的状态），并且仓库中的状态一定是可以让仓库进行修改的。
vuex中的4个核心概念：
1.store （响应式仓库）
2.state （共享的状态，也是仓库所管理的对象）
3.actions （用来接收组件发送过来的请求包。注：只有接收功能，没有修改功能！）
4.mutaions （接收actions传递过来的要求，然后进行修改操作并返回新的state！）
5.getters （mutaions把新的state返回给getters，由getters把这个新的state返回给需要的组件）
vuex的使用步骤：
1.因为vuex是第三方提供的一个插件，所以需要先安装，使用npm install vuex -S安装。
2.使用Vue.use(Vuex)的方式把vuex继承到vue中去。
3.通过vuex提供的一个方法创建一个中央共享仓库store
4.定义这个仓库中state的修改规则。到此这个仓库的设置就完成了。
5.把这个创建好的store，注册到viewmodel中去
以上是对vuex的一些介绍和概念理解，那么下面就根据这五个使用步骤，直接上代码吧：
先看一下项目的文件结构：
步骤1：
在项目跟目录下cmd安装vuex
npm install vuex -S
步骤2：
在main.js中把安装好的vuex继承到vue中去
import Vue from "vue"
import App from "./App"
import Vuex from "vuex"
Vue.use(Vuex)
new Vue({
el:"#app",
render(h){
return h(App)
}
})
步骤3和步骤4：
在项目文件夹内创建一个叫store的文件夹，作为中央仓库。
并在这个文件夹下创建一个文件index.js用来制定仓库规则。
import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex)
//创建仓库
let store = new Vuex.Store({
state:{ //共享的状态
num:0
},
actions:{
//事件的监听，add是事件名
"ADD"(store,payloads) {
console.log("actions-add is called")
store.commit("INC",payloads)
},
},
mutations:{
"INC"(state,args) {
console.log("mutaions-add 修改了state中的num ")
state.num++
}
},
getters:{
"GETNUM":(state)=>{
return state.num;
}
}
})
export default store;
步骤5：
最后在main.js中把步骤4里指定好的仓库规则注册进去
import Vue from "vue"
import App from "./App"
import Vuex from "vuex"
import store from "./store"
Vue.use(Vuex)
new Vue({
el:"#app",
store, //$store
render(h){
return h(App)
}
})
到此为止，我们已经完成了仓库的所有工作。那么接下来就要开始使用这个仓库了。
创建一个页面级组件counterStore.vue，并：
<template>
<div>
<h3>StoreCounter</h3>
<h1>{{ n }}</h1>
<input type="button" value="+" @click="update"/>
</div>
</template>
<script>
import {mapGetters,mapActions} from "vuex";
export default {
name: "CounterA",
computed:{
...mapGetters({
n:"GETNUM"
})
},
methods:{
...mapActions({
update:"ADD"
})
}
}
</script>
<style scoped>
</style>
这样，就完成了vuex这个仓库的使用。
最后，需要留意的一点是，仓库中的actions是可以异步的，所以就是说，它可以访问外部数据！发送Ajax请求。
actions:{
//事件的监听，add是事件名
"ADD"(store,payloads) {
//emit("inc",1)
setTimeout(()=>{
console.log("actions-add is called")
store.commit("INC",payloads)
},2000)
},
},
试着把actions改写一个延迟操作测试一下，结果完全没有问题，可以按照延迟时间正常运行！