vuex的简介与使用

vuex:作用是全局的状态管理；

首先安装(在vue-cli中并没有安装vuex):npm i vuex --save

在main.js里面引入

import Vuex from 'vuex'

Vue.use(Vuex)

此时在main.js里面，我们就可以创建一个名为store的仓库了：

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

我们可以在项目里的任意组件中获取到state里面的count值：

this.$store.state.count

类似于一个项目的全局对象。

这个对象你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

我们继续：

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

此时，当我们需要改变count值的时候，需要通过这样:

<template>
    <div>
        {{count}}
        <button class="btn" @click="add">
                点击一下
        </button>
    </div>
</template>
<script>
export default {
  name: 'Child',
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    add () {
      this.$store.commit('addCount')
    }
  }
}
</script>
<style lang="" scoped>
</style>

到此就已经介绍了，vuex的两个核心了，state和mutations。

还有Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

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

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值

this.$store.getters.doneTodos

Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
```
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
```
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。但是context不是store本身。

触发方式为：

store.dispatch('increment')

我们可以在 action 内部执行异步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

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 的状态

还有Getter

Action

Module

猜你喜欢