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 @input和@click的区别及说明

    vue @input和@click的区别及说明

    这篇文章主要介绍了vue @input和@click的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue2创建高复用组件的方法示例

    vue2创建高复用组件的方法示例

    Vue2中的高复用组件通常是指那些设计得足够通用,并能多次在项目中重复使用的组件,本文给大家详细介绍了vue2创建高复用组件的方法示例,并通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-07-07
  • 浅析Vue 防抖与节流的使用

    浅析Vue 防抖与节流的使用

    防抖节流就是使用定时器 来实现我们的目的。这篇文章通过实例代码给大家介绍vue防抖与节流的使用,感兴趣的朋友跟随小编一起看看吧
    2019-11-11
  • Vue基础语法知识梳理下篇

    Vue基础语法知识梳理下篇

    这篇文章主要介绍了Vue基础语法知识梳理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-12-12
  • vue.js实现日历插件使用方法详解

    vue.js实现日历插件使用方法详解

    这篇文章主要为大家详细介绍了vue.js模拟日历插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue 入口与 initGlobalAPI实例剖析

    Vue 入口与 initGlobalAPI实例剖析

    这篇文章主要为大家介绍了Vue 入口与 initGlobalAPI实例剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 如何去除element-ui中table的hover效果

    如何去除element-ui中table的hover效果

    这篇文章主要介绍了如何去除element-ui中table的hover效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue.js如何获取data-*的值

    Vue.js如何获取data-*的值

    这篇文章主要介绍了Vue.js如何获取data-*的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue离开当前页面触发的函数代码

    vue离开当前页面触发的函数代码

    这篇文章主要介绍了vue离开当前页面触发的函数代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue.js中对css的操作(修改)具体方式详解

    Vue.js中对css的操作(修改)具体方式详解

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;接下来通过本文给大家分享Vue.js中对css的操作(修改)具体方式,感兴趣的朋友跟随小编一起看看吧
    2018-10-10

最新评论