Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据的共享。

安装

$ npm install vuex
# or
$ yarn add vuex

在 vue 实例中注册 store：

new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app")

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

你可以在👉 Store 测试效果。

State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 state 中进行储存

state: {
  counter: 1,
  msg: "hello world!"
}

获取方式一

this.$store.state.msg // hello world!

获取方式二

使用 mapState 函数，将全局数据映射为当前组件的 computed 计算属性使用

import { mapState } from 'vuex'

...mapState(['counter', 'msg'])

Mutations

Mutation 用于变更 Store 中的状态，但它总是同步的。

• Mutation 是改变存储中状态数据的唯一方法。

• 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

mutations: {
    // 定义事件处理函数
  increment(state) {
    // 变更状态
    state.counter++
  },
  // 可以在触发 mutations 时传递参数：
  incrementN(state, step) {
    state.counter += step
  },
  decrementN(state, step) {
    state.counter += step
  }
}

调用方式一

// 调用 commit 函数
this.$store.commit('increment')
// 触发 mutations 时携带参数
this.$store.commit('incrementN', 3) 

调用方式二

使用 mapMutations 函数，映射为当前组件的 methods 函数

import { mapMutations } from 'vuex'

...mapMutations(['increment', 'incrementN'])

Actions

Action 将允许我们异步更新状态，但将使用现有的 mutation。如果你需要按照特定的顺序同时执行几个不同的 mutation，这会非常有帮助。

actions: {
  asyncDecrementN({ commit }, asyncNum) {
    setTimeout(() => {
      commit("decrementN", asyncNum.by)
    }, asyncNum.duration)
  }
}

获取异步方法

// 触发 actions 异步任务时携带参数
asyncDecrementN() {
  this.$store.dispatch("asyncDecrementN", {
    by: -3,
    duration: 1000,
  })
},

Getters

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性

• Getter 将使值能够在模板中静态显示。换句话说，getter 可以读取值，但不能改变状态。

• Store 中数据发生变化，Getter 的数据也会跟着变化

// 展示数据，而不是更改状态
getters: {
  tripleCounter: (state) => state.counter * 3
}

获取方式一

$store.getters.tripleCounter

获取方式二

使用 mapGetters 函数，将全局数据映射为当前组件的计算属性使用

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['tripleCounter'])
}

Modules

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

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。

// module/moduleA.js
const moduleA = {
 state: () => ({
 name: "李四"
 }),
 mutations: {},
 actions: {},
 getters: {}
};

export default moduleA;

// module/moduleB.js
const moduleB = {
 state: () => ({
 name: "老六"
 }),
 mutations: {},
 actions: {}
};

export default moduleB;

// store/index.js
import moduleA from "./module/moduleA"
import moduleB from "./module/moduleB"
const store = new Vuex.Store({
 modules: {
 moduleA,
 moduleB
 }
})

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

详细信息请看 modules

其他

热重载

Vuex 支持在开发过程中热重载 mutation、module、action 和 getter。

项目结构

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

• 应用层级的状态应该集中到单个 store 对象中。
• 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
• 异步逻辑都应该封装到 action 里面。

如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

插件

Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数：

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  })
}

然后像这样使用：

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

表单处理

在 Vuex 严格模式下，状态变更需要在 mutation 函数下执行。在你不了解这个的情况下，使用 v-model 时，可能会发生一些错误。

<input v-model="obj.message">

假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输入时，v-model 会试图直接修改 obj.message。在严格模式中，由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

方式一：给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用一个方法

<input :value="message" @input="updateMessage">

<script>
export default {
  computed: {
    ...mapState({
      message: state => state.obj.message
    })
  },
  methods: {
    updateMessage (e) {
      this.$store.commit('updateMessage', e.target.value)
    }
  }
}
</script>

mutation 函数

mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

方式二：使用 setter 的双向绑定计算属性

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

严格模式

开启严格模式，仅需在创建 store 的时候传入 strict: true：

const store = new Vuex.Store({
  // ...
  strict: true
})

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。

类似于插件，我们可以让构建工具来处理这种情况：

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

常见的问题

什么时候使用 Vuex？

Vuex 通过全局注入 store 对象，来实现组件间的状态共享。

开发大型单页应用时（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用 vuex 比较合适。

如果只是简单的多个组件间传递数据，可以使用组件间常用的通信方法。

Vuex 的设计思想

Vuex 借鉴了 Flux、Redux 和 The Elm Architecture，将数据存放到全局的 store，再将 store 挂载到每个 vue 实例组件中，利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Vuex 统一管理状态的好处

• 能够在 Vuex 中集中管理共享的数据，易于开发和后期维护

• 能够高效地实现组件之间的数据共享，提高开发效率

• 存储在 Vuex 中的数据都是响应式的，能够实时保存数据与页面的同步