vuex中的state属性解析

更新时间：2022年04月12日 11:23:01 作者：正版蜀黍

这篇文章主要介绍了vuex中的state属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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'
    ])
}

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

您可能感兴趣的文章:

Vue中的vue-resource示例详解
Vue与后台Api进行交互通常是利用vue-resource来实现的，本质上vue-resource是通过http来完成AJAX请求相应的。这篇文章主要介绍了Vue中的vue-resource示例详解,需要的朋友可以参考下
2018-11-11
Vue2.x配置路由导航守卫实现用户登录和退出
之前在Vue的学习中通过路由导航守卫控制实现了用户登录模块的功能，本文基于Vue2.x进行实现，在此将实现过程进行记录与总结，感兴趣的可以了解一下
2021-08-08
Vue实现多标签选择器
这篇文章主要为大家详细介绍了Vue实现多标签选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
elementUI el-form 数据无法赋值且不报错解决方法
本文主要介绍了elementUI el-form 数据无法赋值且不报错解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-12-12
vue如何加载本地json数据
这篇文章主要介绍了vue如何加载本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue.js中该如何自己维护路由跳转记录
这篇文章主要给大家介绍了关于Vue.js中该如何自己维护路由跳转记录的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
vue element 中的table动态渲染实现（动态表头）
这篇文章主要介绍了vue element 中的table动态渲染实现（动态表头），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue图片裁剪插件vue-cropper使用方法详解
这篇文章主要为大家详细介绍了vue图片裁剪插件vue-cropper使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
VUE前后端学习tab写法实例
在本篇文章里小编给大家分享了关于VUE前后端学习tab写法实例以及相关知识点，需要的朋友们参考下。
2019-08-08
Vue之请求如何传递参数
这篇文章主要介绍了Vue之请求如何传递参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04