初步理解vuex

理解vuex

官方文档https://vuex.vuejs.org/zh-cn/intro.html是这样描述vuex的：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
简单理解：vuex就是一种设计思想，可以通过图1-1来理解
解读上图：意思是把所有组件的所有状态和数据放在一个统一的内存空间中去管理（State），State里边的数据可以方便的映射（Render）到我们的组件（Vue Components）上来渲染组件。当组件的数据发生变化的时候Dispatch一个Action，而Action可以做一些异步操作，比如与后端的交互。之后Commit一个Mutation（其实Vue Components也可以直接Commit一个Mutation），而这一步骤是唯一一个可以修改State的途径，以便State状态的修改可以预测。当State被修改以后又会映射到Component上。这些步骤实现了一个闭环。那么，问题来了！

---

在vue中，当我们修改数据以后，被修改的数据就会直接映射到dom的变化，而在vuex中却不行，变的繁琐？
vuex中不能直接修改组件的数据，只能通过dispatch–>action或者是commit–>mutation来修改数据。而vuex的使用场景有两个：
第一个是解决多个组建之间的数据共享。假如我们的应用很是复杂，其中的一些数据被某些组件共享，但是这些组件确实关联度很低或者是兄弟组建的时候，想要共享数据就会很困难，运用其他的手段也不容易，更不易维护。
第二个是解决路由之间的复杂数据传递。假如我们遇到路由跳转传入的参数特别复杂的时候可以运用vuex来解决。
所以，要根据项目情况，复杂程度来确定是否要运用vuex。

---

如何使用vuex
初始化store配置
首先会新建一个几个js文件：
state.js：起到状态管理的作用

const state = {
    //需要传递的对象
}
export default state

mutation-types：与mutations相关的名字，存储mutation相关的字符串常量

export const NAME = ' NAME '

mutations.js：所有的mutation,修改数据

import * as types from './mutation-types'

const matutions = {
    [types.NAME](state,item){//第二个参数时我们提交mutation时传的参数
        state.item = item
    }
}

export default matutions

getters.js：对state做一些映射，取数据到组件

//state => state.item实际上就是一个简写state一个function，return了一个item
export const item = state => state.item

actions.js：异步操作修改或者对mutation做一些封装，
index.js:入口文件的初始化

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'//这个插件的作用：通过mutation的方式修改state的时候，会在控制台打印一个logger，显示这条state是什么，还有之前修改的是什么，方便查看日志

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    strict:debug， //当debug为true的时候就开启严格模式，当上线的时候模式被关闭
    plugins:debug?[createLogger()]:[]
})

其次，在src的main.js文件下引入

import store from './store'

以上store的初始化配置就完成了
具体在项目中的应用根据情况而定，以上理解若有不足欢迎大家来指正