Vuex状态管理

2019-06-19 本文已影响0人冬天吃橘子_Autumn

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

使用方法：

使用vuex插件

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

创建一个Store实例

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

vuex的一些规则：
- 提交mutations是更改状态的唯一方法，并且这个过程是同步的
- mutation 必须是同步函数
- 异步逻辑都应该封装在actions里面，但是actions不能直接更改state里面的数据，只能通过mutations里面的方法来修改state里面的数据
- Vuex中的store是响应式的，当状态发生变化时，监视状态的Vue组件也会自动更新
- 当需要在对象上添加新的属性时，应该使用Vue.set
```
Vue.set(obj,'newProp','123')
```

在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 
        }
    }
})
```
触发mutation中的方法？
- mutations里面的 handler并不能直接被调用，这个选项更像是事件注册：当触发一个类型type为 XXX 的 mutation 时，调用此函数handler
- 要唤醒一个 mutation handler，需要以相应的 type 调用 store.commit 方法：commit
```
store.commit('create',100)
//或者：
store.commit({
    type:'create',
    num:100
})
```
在Vue组件中如何获取Vuex状态？

在组件中提交mutations状态

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

在actions中触发mutation中的方法

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

分发 Action

Action 通过 store.dispatch 方法触发：

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

Vuex状态管理

猜你喜欢

热点阅读