vuex学习笔记

2017-03-03 本文已影响157人一只大椰子

vuex

状态管理器
作为应用中所有组件的中央储存
只能以预定的方式去操作状态
把所有组件共享的状态抽取出来作为全局的单例，使得任何组件都能访问状态、触发动作

初始化

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

注入到App

const app = new Vue({
  el: '#app',
  // 会自动注入到每个子组件
  store: store
  // ...
})

// 接下来就可以在每个组件里使用$store来代替this.store

State

在组件中使用State里的数据（注意它是响应式的）
const Counter = {
template: <div>{{ count }}</div>,
computed: {
count () {
return $store.state.count
}
}
}

使用mapState一次性做几个computed
import { mapState } from 'vuex'

export default {
  computed: {
    otherComputed() {},
    ...mapState({  // ES2015的新语法，把对象分散为多个属性
      count: state => state.count,  // 接收的state参数里存了各种东西
      // 上下两句话二选一
      countAlias: 'count',
    })
  }
}

// 如果属性的名字一样，可以传名称的数组给mapState
mapState(['count'])

但并非所有状态都无脑放State里，也可以放组件自己的储存里

Getters

在全局提供可复用的"computed属性"供各个组件调用
简单使用
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => { // 接收第一个参数state用于调用state里的数据，第二个参数getters用于使用其他getter的结果
return state.todos.filter(todo => todo.done)
}
}
})
```
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount  // 通过$store.getters调用
  }
}
```

同样也有mapGetters
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
    ])
  }
}

// 如果想改名字可以用对象
...mapGetters({
  doneCount: 'doneTodosCount'
})Mutations

Mutations

提交Mutation是修改State的唯一方法
类似于事件（events）

基本使用
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state, n) { // 接收state作为第一个参数，后面是commit时候传递过去的参数
// mutate state
state.count++
}
}
})

// 这样调用（实践中通常传一个对象作为第二个参数，这样可以传递多个属性）
store.commit('increment', 10)  // 第一个参数是mutation名，而10就是上面的n

//    另外一种写法，此时整个对象会作为mutation函数的第二个参数
store.commit({
  type: 'increment',
  amount: 10
})

使用mapMutations
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([  // 数组形式
      'increment' // this.increment() = this.$store.commit('increment')
    ]),
    ...mapMutations({  // 对象形式
      add: 'increment' // this.add() = this.$store.commit('increment')
    })
  }
}

注意事项：
- 在一开始的时候初始化State的每个属性
- 对对象添加属性时应该使用Vue.set方法
- Mutation应当是同步的，同时也不应该在异步方法里调用Mutation，否则会导致分不清先后顺序

Actions

提交的是Mutation而不是State
可以包含异步操作
简单使用
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) { // context有着store的所有属性和方法
context.commit('increment')
}
}
})
```
// 使用解构来简化写法
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
```
分发 Actions
actions: {
incrementAsync ({ commit }, payload) { // 进行异步操作。第二个参数是dispatch给他的
setTimeout(() => {
commit('increment')
}, 1000)
}
}
```
// 两种触发方式
store.dispatch('incrementAsync', {
  amount: 10
})
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})
```
使用样例
actions: {
checkout ({ commit, state }, payload) {
const savedCartItems = [...state.cart.added]
// 做一些异步操作例如清空购物车
commit(types.CHECKOUT_REQUEST)
shop.buyProducts(
products,
// 成功回调
() => commit(types.CHECKOUT_SUCCESS),
// 失败回调
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}

mapActions
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment' // this.increment() = this.$store.dispatch('increment')
    ]),
    ...mapActions({
      add: 'increment' // this.add() = this.$store.dispatch('increment')
    })
  }
}

处理异步的回调
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => { // 返回了一个Promise
setTimeout(() => {
commit('someMutation')
resolve() // 函数内做好事情后resolve
}, 1000)
})
},
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => { // 这里用then
commit('someOtherMutation')
})
}
}

Modules

把Store划分成若干个 Module，避免臃肿
每个Module有自己的State、Mutation、Action、Getter等

二合一的state
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({  // 包含2个子module
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA's state
store.state.b // -> moduleB's state

本地State
- Module里的Getter等拿到的是Module自己的State，
- 如果要访问根State，在Action里要使用context.rootState，而在Getter里rootState作为第三个参数传入。

名字空间

默认情况下不同Module里的Mutation等都注册在全局名字空间
可以使用前缀或者后缀来区分

样例
// types.js

// 定义名字常量并添加前缀
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'

// modules/todos.js
import * as types from '../types'

// define getters, actions and mutations using prefixed names
const todosModule = {
  state: { todos: [] },

  getters: {
    [types.DONE_COUNT] (state) {
      // ...
    }
  },

  actions: {
    [types.FETCH_ALL] (context, payload) {
      // ...
    }
  },

  mutations: {
    [types.TOGGLE_DONE] (state, payload) {
      // ...
    }
  }
}

注册Module
store.registerModule('myModule', {
// ...
})
```
// 调用
store.state.myModule.
```

vuex学习笔记

猜你喜欢

热点阅读