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

链接: https://www.9xkd.com/

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章