36.Vue.js :Vuex

Vuex 是什么？

Vuex 是一个针对Vue.js 开发的状态管理模式。说简单一点就是一个工具，可以管理（修改或设置）所有
组件用到的数据，而不需要借助之前的event bus 或props在组件间传值。

Vuex使用场景

大型单页应用程序，存在多组件共享数据的时候，需要用到

store(一个容器对象，存储Vuex 中的state.mutations,actions,actions,getters等）

• state(一个保存数据的对象，对象中的数据可以供所有组件使用）
• mutations(一个对象，保存的是更改state的函数，也只有它能更改state中的值，触发方式this.$store.commit（‘函数名’，参数）
• actions(一个对象，保存的是触发mutations的函数，让mutations去修改state中的值）
• getters（一个对象，保存的是一些类似与计算属性的函数，可以通过他们得到任何依赖于state的新的数据）

使用Vuex

//第一步
npm install vuex -S

//第二步，在src目录下创建store.js 文件夹
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state={}
const mutations ={}
const actions = {}
const getter = {}

export default new Vuex.Store({
state,
getters,
actions,
mutations
})

//第三步，在入口文件main.js 中引入
import store from '@/store/store'

//实例中注入
new Vue({
    el:'#app',
    router,
    store,
    components:{App},
    template:'<App/>'
})