VUEX的一点用法了解

VUEX的用法

适合用于大型项目

多个组件之间通信，如果变量过多，就会造成代码中有很多冗余数据。

作为一个完整的状态管理系统，它有一整套的方案。为什么是一个周期呢？为什么变量的更改要设置那么多步骤呢？因为这些状态并不仅仅在一个组件中使用，如果没有统一的管理办法，那么这些状态将是混乱的。因此，改变数据有统一的规则，引入数据也有统一的规则。

state

state是用来存储数据的。

getter

通过getter获取属性

mutation

在mutation中定义对于state中每个数据的变更方式。

通过commit方法出发mutation

在每个组件中如何获得state的数据呢？

1. 在computed中定义函数===》可简化为箭头函数
2. 可以通过 rename：‘name’实现；当rename和name相同时，可以简化为‘name’
3. 多个数据，可通过mapstate实现（…mapstate）

插播一个es的新功能：computed Property Name。什么意思呢？

当我们定义对象时，其中每个属性的名称往往是不变的值，当属性名是变量时，我们只需要给它价格中括号。这里的变量可以是字面量，也可以是通过数据类型定义的变量名称

提到这个是因为，在mutations中，你会见到很多这种写法：

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

在需要改变state状态的子组件中，在methods中添加mutations。mutation中的操作是同步的，直接改变状态。

action

如果涉及到异步操作，那就使用action。通过dispatch方法调用action。