vuex 讲解

　　vuex 状态的管理状态，它采用集中式存储管理应用的全部组件的状态，尤为是在中大型项目，则是很好的开发利器

　　vuex 的流程图

　　

　　vuex 的优点：

　　　　1. vuex 的存储状态，响应式的

　　　　2. 他是全部组件状态的集合

　　vuex 的四种状态

　　state ：就是数据仓库；也是咱们仓库存放数据的地方

　　mutations：修改仓库的数据，只能经过 commit 来向上传递

　　咱们组件若是想修改数据，正确的操做流程

　　1. 查看是同步仍是异步，是同步则，跳过 actions，直接从 mutations 中修改 state 的数据，这样 state 仓库的数据修改了以后，咱们才能正确的响应到组件上

　　因此，组件仅仅把事件提交给 mutations 就行了， 让 vuex 的 mutations 的方法执行，

　　使用的方法，配合使用

　　　　组件vue 中想修改 vuex 中 state （仓库）中的数据

　　　　this.$store.commit("jia",5)

　　　　vuex 中实例对象中 将 jia 方法的处理

　　　　mutations:{

　　　　　　jia(state,n){　　// state 就是仓库，也是咱们修改数据的东西， n 就是第二个参数，表明5

　　　　　　　　console.log(state);

　　　　　　　　console.log(n);

　　　　　　}

　　　　}

　　第二种写法：

　　　　this.$store.commit({

　　　　　　type:"jia",　　　　// type 决定了提交的事件名

　　　　　　cont:n　　　　　// 这个就是咱们组件向 vuex 中提交的数据　

　　　　})

　　mutations:{

　　　　jia(state,n){

　　　　　　console.log(state);　　// 就是咱们的 vuex 的仓库

　　　　　　console.log(n);　　　//  n 就是提交的对象　

　　　　}

　　}

　　actions：若是咱们涉及到异步的提交数据，那就只能从 actions 开始，到 mutations 而后才能修改 state 中的数据，最后渲染到 vue 的组件上

　　若是咱们不这样操做，虽然咱们的数据因响应式的也能够正常的渲染页面，可是咱们的 vuex 的仓库 state ，却不能正常的显示

　　操做步骤：

　　vue 的组件上，咱们的提交方式

　　this.$store.dispatch('jia',5)；

　　// 对咱们 vuex 的实例上的创建一个仓库，放一个数据

　　state:{

　　　　cont:0

　　}

　　而后咱们能够在 vuex 的实例上对异步的处理，在 actions 上

　　actions:{

　　　　jia(store,n){

　　　　　　console.log(store)　　// 就是，vuex 的实例

　　　　　　console.log(n)　　// 就是咱们传输的数据

　　　　　　// 在这里咱们进行异步处理

　　　　　　setTimeout(()=>{

　　　　　　　　store.commit('jia',n)　　// 咱们异步处理完了，而后咱们提交到 mutations 上来对 仓库上的 state 来进行修改

　　　　　　},2000)

　　　　}

　　}

　　mutations:{

　　　　jia(state,n){

　　　　　　state.cont++

　　　　}

　　}

　　咱们还有对象的第二种写法，与 mutations 提交的对象写法一致

　　getters:{

　　　　doublecount(){

　　　　　　return conts+10;

　　　　}　　// 返回值就是 doublecount 的 return 值

　　}

　　moudel 模块，

　　思想：就是将咱们写在一块儿的东西，分开，好比 state 仓库的数据，咱们可使用 es6 的模块化开发，来引入别的模块的数据，先达到文件分离的目的

　　咱们还可使用 module 对象，来使咱们的仓库分离，只是 state 仓库中的数据不同，但别的东西都同样

　　写法如图：

　　　　vue 组件

　　　　

　　　　vuex 的写法