vuex 7 state

1、概述

state: 实例化的 store 属性对象 --> state 对象；

作用：定义公共状态属性；

注意：store 对象 （注册时）会挂载到 vue 实例上，可通过 $store 访问到；

2、定义 state 语法

// 写法1：state 属性值为配置对象
export default new Vuex.Store({
  state: {
    count: 0,
    money: 100,
  },
})

// 写法2：state 属性值为回调函数 （更推荐这种写法）
export default new Vuex.Store({
  state: () => {
    return {
      count: 0,
      money: 100,
    }
  }
})

开发工具中查看结果：

3、获取/使用 state

-0、说明

方法选择：根据使用 state/共享状态属性 的频次，按需选择 mapState语法 或 this.$store.state[.xxx模块].xxx 语法

-1、方法 1 - mapState 语法

（0）解释说明

拓展： mapState 是 vuex 提供的辅助函数；
场景：大量使用 state 共享数据时，推荐此方法；
优点：统一导入，统一管理。
引入：常在 vue 的 computed 配置项下 提取 state 属性；

（1）非模块下；

// 1、按需导入 vuex 提供的 操作 state 的辅助函数 mapState
import { mapState } from 'vuex'

// 2、computed 内使用api方法获取 state 内共享状态属性
computed: {
  // ES6 的扩展运算符获取 多个 state对象 内的公共状态属性
  /**
   * @brief: vuex 提供使用 state 的辅助函数
   * @param {array} （格式1） 数组，元素是 state 内定义的状态数据
   * @return {*}
   */
  ...mapState(['count', 'money', ...])
  // tip: 前面 ... 是语法要求的 扩展运算符，后面 ... 是表示多个变量
}

<div>使用： {{ count }}</div>

tip: ... 将属性解开定义为 计算属性 的值。（算是固定用法）

示例：

（2）模块化下；

export default {
  computed: {
    // 方式1：直接指定模块的路径
    ...mapState('trademark', {
      tmname: 'tmname',
    }),

    // 方式2：使用对象展开运算符的例子
    ...mapState({
      count: state => state.trademark.tmname,
    }),
  },
}

方法 2：this.$store.state

原理：vuex 的 store 实例挂载在 vue 上，通过 $store 访问；
场景：只有几处使用 state 数据时；
优点：语法简短，不使用额外的方法；
缺点：大量使用时，需要多次重复 $store.state.xxx 语法结构，且修改时也需要逐个查找并修改；

语法：

直接使用：

<div>state 的数据： {{ $store.state.count }}</div>

模块化中：

<div>state 的数据： {{ $store.state.trademark.tmname }}</div>

定义为数据后再使用：

export default {
  // tip: 注意要定义在 computed 中
  computed: {
    count() {
      return this.$store.state.count
    },
  },
}

<div>state 的数据： {{ count }}</div>