vuex的理解和使用

为什么使用vuex？如何使用？

为什么使用vuex？
1、当一个组件需要多次派发事件时
为什么说？多次派发事件需要用到vuex?原因很简单,如果它多次派发事件,必然有其它组件进行接收并调用。 如果是一个组件进行接收和调用还好,但是如果两个？三个？甚至四个呢？ 如果派发事件的组件只是派发一个事件,那还比较好管理,一旦进行多次派发那么维护的难度会以乘法增加
2、跨组件共享数据、跨页面共享数据
在开发Vue项目的时候，已经发现很多次。存在这种情况 封装了一个基础组件(即很多地方会用到),根据不用的业务派发不同的事件。但是发现，有时想派发事件都不行，因为父组件根本就没有引用。 没有引用父组件跟获取当前派发事件，并更新数据呢？ 当然了，是用Vuex
Vue 只预载了两种数据传递方案：父子属性传递、全局属性传递。（当然还有事件机制。）当你的数据涉及到多个组件，使用父子属性传递非常繁琐，全局属性不好管理，这时就可以选择使用vuex

如何使用？
使用npm安装

npm install vuex --save

创建文件：

在index.js中引入其他文件：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import user from './modules/user'

export default new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    modules:{
        user
    }
})

在main.js中引入：

import store from './store'

new Vue({
    router,// 路由挂载
    store, // 引入状态管理
    'render': h => h(App)
}).$mount('#app');

user.js文件的内容：

const state = {
    userInfo: {}
}

const mutations = {
    SET_USER_INFO: (state, userInfo) => {
        state.userInfo = userInfo
    }
}

const actions = {
    setUserInfo({commit}, userInfo) {
        // console.log(userInfo);
        commit('SET_USER_INFO',userInfo)
    }
}

export default{
    namespaced:true,  // 注意这里，如果使用模块的话，最好加上，防止命名冲突
    state,
    mutations,
    actions
}

vuex的几个核心概念：
State：唯一的数据源，我们需要把任何一个组件中需要抽取出来的变量放入到state中去
Getters：通过Getters可以派生出一些新的状态
Mutations：更改Vuex的store中的状态的唯一方法时提交mutation
Actions：Action提交的是mutation，而不是直接变更状态。Action可以包含任何的异步操作, 但mutation必须是同步操作。
操作步骤： 当组件中的状态发生改变，通过dispatch函数提交到Action，Actions再通过Commit函数提交到Mutations, 此时，状态发生改变都会实时的去渲染组件。

State

Getters

Mutations

Actions

Modules