Vuex入门

基本概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单的说,就是定义了一个管理全局组件数据的容器,并且是全局单例的,如果你对Spring的IOC有所了解的话,那应该很好理解.

state

state:简单的说,就是需要全局共享的数据 eg

// vuex/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
export default new Vuex.Store({
  state:{
    username:'alight',
  }
})
// main.js
import store from  './vuex';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store
});

组件中如何获取store的数据

<!--通过store直接获取具体的state-->
<template>
  <div>
    {{$store.state.username}} <!--alight-->
  </div>
</template>
<!--通过mapState-->
<template>
  <div>
    {{username}},{{age}} <!--alight,18-->
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: "test",
    computed: {
      ...mapState(['username', 'age'])
    }
  }
</script>

Mutation

更改 Vuex 的 store 中的state的唯一方法是提交 mutation。

定义mutation方法

export default new Vuex.Store({

  state:{
    username:'zh',
    age:18,
    count:0
  },
  mutationns:{
    addN(state,n){
      state.count+=n
    }
  }
 })

调用mutation方法以及传递参数

<template>
  <div>
    {{count}}
    <el-button @click="addCount">add count</el-button>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "test",
    computed: {
      ...mapState(['count'])
    },
    methods:{
      addCount(){
        this.$store.commit('addN',3);
      }
    }
  }
</script>

通过mapMutations触发mutation

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

Mutation 必须是同步函数

一条重要的原则就是要记住 mutation 必须是同步函数。为什么？请参考下面的例子：

mutations: {
 someMutation (state) {
   api.callAsyncMethod(() => {
     state.count++
   })
 }
}

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

Action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state,n) {
      state.count+=n
    }
  },
  actions: {
    // Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
    increment (context,n) {
      context.commit('increment',n)
    }
  }
})

// 触发action
this.$store.dispath('addAsync',5)
// 使用 mapActions触发
import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
      ...mapActions([
          'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

          // `mapActions` 也支持载荷：
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
      ]),
      ...mapActions({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
      })
  }
}

Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

通过属性访问

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

通过方法访问

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

mapGetters

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

... ...

官方文档 (opens new window)