Vuex状态管理

Vuex是一个专门为Vue.js应用程序开发的状态管理模式

使用方法：

1. 使用vuex插件

   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)
   

2. 创建一个Store实例

   const store = new Vues.State({
       state: {
           //状态，类似于vue的data，但是数据不能修改
       },
       mutations:{
           //类似于事件，同步事件
       },
       actions:{
           //异步操作，之后
       }
   })
   

3. vuex的一些规则：

   • 提交mutations是更改状态的唯一方法，并且这个过程是同步的

   • mutation 必须是同步函数

   • 异步逻辑都应该封装在actions里面，但是actions不能直接更改state里面的数据，只能通过mutations里面的方法来修改state里面的数据

   • Vuex中的store是响应式的，当状态发生变化时，监视状态的Vue组件也会自动更新

   • 当需要在对象上添加新的属性时，应该使用Vue.set

     Vue.set(obj,'newProp','123')
     

4. 在mutations中如何获取state中的数据？

   • mutations非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

   • 我们可以在回调函数中进行对state中数据修改的操作，接收state作为第一个参数，其余参数可从第二个参数开始

   • 用state.XXX来访问state中的数据

     const store = new Vuex.Store({
         state:{
             count:1
         },
         mutations:{
             create(state, num){
                 state.count += num 
             }
         }
     })
     

5. 触发mutation中的方法？

   • mutations里面的 handler并不能直接被调用，这个选项更像是事件注册：当触发一个类型type为 XXX 的 mutation 时，调用此函数handler

   • 要唤醒一个 mutation handler，需要以相应的 type 调用 store.commit 方法：commit

     store.commit('create',100)
     //或者：
     store.commit({
         type:'create',
         num:100
     })
     

6. 在Vue组件中如何获取Vuex状态？

7. 在组件中提交mutations状态

   //应该提前在组件中注入vuex，跟router是相似的
   this.$store.commit('create',100)
   

8. 在actions中触发mutation中的方法

   actions: {
     increment ({ commit }) {
       commit('create')
     }
   }
   

9. 分发 Action

   Action 通过 store.dispatch 方法触发：

   store.dispatch('increment')
   //在组件中分发action
   this.$store.dispatch('increment')