vuex中的state属性解析

目录

• state属性介绍
• state的使用
• 扩展
• vuex的State
• 单一状态树
• 在Vue组件中获得 Vuex 状态
• mapState辅助函数

state属性介绍

state属性是Vuex中用于存放组件之间共享的数据；也就是说，我们把一些组件之间共享的状态主要存放在state属性中；它采用的是单一状态树——用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

state的使用

在HTML中我们可以直接省略 this 关键字 ，直接使用 $store.state.状态名(变量名) 来访问 vuex 中的存储的状态；

① 抽离出去的state.js文件

export default {
  loadingFlag: true,
  // 用于保存已选类别标签
  changedLableList: [
    { name: '头条', class: 'iconfont icon-jinrishouru', url: 'topnews/index' },
    { name: '苹果', class: 'iconfont icon-pingguoapple', url: "apple/index" },
    { name: 'NBA', class: 'iconfont icon-tiyu-lanqiu', url: "nba/index" },
    { name: '创业', class: 'iconfont  icon-chaxunchuangyebankaitongqingkuang', url: "startup/index" },
    { name: '足球', class: 'iconfont icon-swticonzuqiu', url: "football/index" },
    { name: '体育', class: 'iconfont icon-paobu', url: "tiyu/index" }
  ]
}

② 在index.js文件中导入state.js文件并注册

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import state from './state'
import actions from './actions'
import getters from './getters'
// 安装插件
Vue.use(Vuex)
// 创建对象
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

③ 在组件中使用

<div class="flex-content">
          <div class="lable-items" v-for="(item, index) in $store.state.changedLableList" :key="index" @click="decrementTypeLable(index)">
            <div class="item">
              <div><i :class="item.class"></i></div>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>

在js代码中，必须使用 this.$store.state.状态名(变量名) 来访问vuex中存储的状态；

computed: {
    title() {
      return this.$route.meta.title
    },
    changedLableList() {
      return this.$store.state.changedLableList
    },
    alternativeLableList() {
      return this.$store.state.alternativeLableList
    }
  },

扩展

为什么要在组件的computed计算属性中使用不能放到data属性中？

data 中的内容只会在 created 钩子函数触发前初始化一次，类似于我们直接写 const data = { foo: 123 }这样，这时属性的值是纯粹的字面量，而不是所谓的【缓存】(没有 Cache Miss 哪来的缓存？)。JS字面量赋值后显然不会自动更新。

最简单的例子：

let b = ‘xxx' // 相当于state中的数据
let a = b // 相当于data初始化时，将b的值赋值给了a
b = ‘xyz' // 这时对于原始类型，a 肯定还是 ‘xxx'

换句话说，data 中内容依赖变更时，data 属性不会变更（它的设计目标就是保存组件的局部状态数据而已）。而 computed则是通过【依赖追踪】实现的，在 computed 求值时引用的 Vue 变量变化时，会触发对 computed 的重新计算。所以我们可以使用computed 去引用 Vuex 状态变量，从而使得依赖追踪生效。或者，将 Vuex 状态变量通过 mapState() 方法映射为 computed 也是一个很方便的选择。

vuex的State

state 是Vuex中的基本数据，state 上存放的就是所谓的状态。当没有使用 state 的时候，直接在 data 中进行初始化，有了 state 之后，我们就把 data 上的数据转移到 state 上去了。

单一状态树

Vuex 使用到的是单一状态树，即用一个对象就包含了全部的状态数据。也就是说如果我们定义了一个 store 的实例，那么这个 store 实例里面只有一个 state。state作为构造器选项，定义了所有我们需要的基本状态参数。

单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

在Vue组件中获得 Vuex 状态

从store实例中读取状态最简单的方法就是在计算属性中返回某个状态。

示例：

例如我们在state中定义一个count属性，给它赋一个值为10，store.js文件内容如下所示：

import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)
const state = {
    count: 10
}
export default new Vuex.Store({
    state
})

然后创建一个 Counter组件，在组件中返回count，内容如下所示：

const Counter = {
  template: `<div> count的值为：{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count  //返回store实例的count状态
    }
  }
}

每当 store.state.count 变化的时候，都会重新求取count属性，并刷新界面。

这种模式依赖于全局的管理员 store，如果模块多了，那么每个模块或者页面只要用到了这个 state 里面的数据，都得把 store 引入进来，这样的操作确实有点难受。所以出现了下面这种解决办法。

Vuex 通过store 选项，提供了一种机制将状态从根组件 “注入” 到每一个子组件中：

new Vue({
  el: '#app',
  store,  // 根组件通过store选项将store实例注入所有地子组件
  // 子组件
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

Vue项目的index.html文件内容如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>侠课岛</title>
  </head>
  <body>
    <h1>侠课岛欢迎你</h1>
    <div id="app"></div>
  </body>
</html>

最终我们使用 npm run dev 运行项目，浏览器中的输出结果如下图所示，如果我们在state中改变count的值，页面会自动刷新：

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。

示例：

在使用mapState函数之前，需要先引入它：

import { mapState } from 'vuex'

引入后才可以开始使用，它两种用法，可以接受一个对象或接受一个数组。

对象用法如下：

import { mapState } from 'vuex'
export default {
  // 下面这两种写法都可以
  computed: mapState({
    // 组件内的每一个属性函数都会获得一个默认参数state,然后通过state直接获取它的属性
    count: state => state.count,
    // 'count' 直接映射到state对象中的count,相当于this.$store.state.count
    count: 'count'　
  })
}

数组用法如下所示：

// 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给mapState传一个字符串数组。
export default {
    computed: mapState([ // 数组
      'count'
    ])
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。