您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Vuex State

本小节我们将学习和使用 Vuex 中 state 的概念。如何创建 state、组件中 state、以及辅助 mapState 的使用。

在上一小节中,我们已经给大家写了简单的示例,大家一定还记得 Vuex.Store({...}) 这个。在 Vuex 中,我们通过该创建数据仓库,并把数据 state 传入。例如:

const@H__26@ store =@H__26@ new@H__26@ Vuex.@H__26@Store@H__26@(@H__26@{@H__26@
  state:@H__26@ {@H__26@
    count:@H__26@ ,@H__26@
    name:@H__26@ '网'@H__26@,@H__26@
    :@H__26@ ''@H__26@
  }@H__26@
}@H__26@)@H__26@

那么,创建完数据仓库后,我们怎样才能在 Vue 组件中使用它呢?我们知道,要使用 Vue 需要通过 new Vue () 创建 Vue 实例,并传入对象的参数。要在 Vue 中使用 store,只需要在创建 Vue 实例的时候将 store 传入即可:

var@H__26@ vm =@H__26@ new@H__26@ Vue@H__26@(@H__26@{@H__26@
  el:@H__26@ '#app'@H__26@,@H__26@
  store:@H__26@ store
}@H__26@)@H__26@

那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的就是在计算中返回某个状态:

<!DOCTYPE html>@H__26@
<@H__26@html@H__26@ lang@H__26@=@H__26@"@H__26@en"@H__26@@H__26@>@H__26@@H__26@
<@H__26@head@H__26@>@H__26@@H__26@
  <@H__26@@H__26@ charset@H__26@=@H__26@"@H__26@UTF-8"@H__26@@H__26@>@H__26@@H__26@
  <@H__26@@H__26@ name@H__26@=@H__26@"@H__26@viewport"@H__26@@H__26@ content@H__26@=@H__26@"@H__26@width=device-width, initial-scale=1.0"@H__26@@H__26@>@H__26@@H__26@
  <@H__26@@H__26@ http-equiv@H__26@=@H__26@"@H__26@X-UA-Compatible"@H__26@@H__26@ content@H__26@=@H__26@"@H__26@ie=edge"@H__26@@H__26@>@H__26@@H__26@
  <@H__26@title@H__26@>@H__26@@H__26@Document</@H__26@title@H__26@>@H__26@@H__26@
</@H__26@head@H__26@>@H__26@@H__26@
<@H__26@body@H__26@>@H__26@@H__26@
  <@H__26@div@H__26@ id@H__26@=@H__26@"@H__26@app"@H__26@@H__26@>@H__26@@H__26@
    <@H__26@div@H__26@>@H__26@@H__26@ {{ count }} </@H__26@div@H__26@>@H__26@@H__26@
  </@H__26@div@H__26@>@H__26@@H__26@
</@H__26@body@H__26@>@H__26@@H__26@
<@H__26@script@H__26@ src@H__26@=@H__26@"@H__26@https://unpkg.com/vue/dist/vue.js"@H__26@@H__26@>@H__26@@H__26@@H__26@</@H__26@script@H__26@>@H__26@@H__26@
<@H__26@script@H__26@ src@H__26@=@H__26@"@H__26@https://unpkg.com/vuex@3.1.2/dist/vuex.js"@H__26@@H__26@>@H__26@@H__26@@H__26@</@H__26@script@H__26@>@H__26@@H__26@
<@H__26@script@H__26@ type@H__26@=@H__26@"@H__26@text/javascript"@H__26@@H__26@>@H__26@@H__26@
  const@H__26@ store =@H__26@ new@H__26@ Vuex.@H__26@Store@H__26@(@H__26@{@H__26@
    state:@H__26@ {@H__26@
      count:@H__26@ 
    }@H__26@
  }@H__26@)@H__26@
  var@H__26@ vm =@H__26@ new@H__26@ Vue@H__26@(@H__26@{@H__26@
    el:@H__26@ '#app'@H__26@,@H__26@
    store,@H__26@
    computed:@H__26@ {@H__26@
      count@H__26@(@H__26@)@H__26@ {@H__26@
        return@H__26@ this@H__26@.@H__26@$store.@H__26@state.@H__26@count
      }@H__26@
    }@H__26@
  }@H__26@)@H__26@
@H__26@</@H__26@script@H__26@>@H__26@@H__26@
</@H__26@html@H__26@>@H__26@@H__26@

解释
JS 第 4-8 行,我们定义了仓库 store。
JS 第 11 行,创建 Vue 实例的时候传入 store。
JS 第 13-15 行,利用计算返回 count。
HTML 中利用插值 count 的数据。

当组件需要多个状态时候,将这些状态都声明为计算会有些重复和冗余。为了这个问题,我们可以使用 mapState 辅助帮助我们计算:

<!DOCTYPE html>@H__26@
<@H__26@html@H__26@ lang@H__26@=@H__26@"@H__26@en"@H__26@@H__26@>@H__26@@H__26@
<@H__26@head@H__26@>@H__26@@H__26@
  <@H__26@@H__26@ charset@H__26@=@H__26@"@H__26@UTF-8"@H__26@@H__26@>@H__26@@H__26@
  <@H__26@@H__26@ name@H__26@=@H__26@"@H__26@viewport"@H__26@@H__26@ content@H__26@=@H__26@"@H__26@width=device-width, initial-scale=1.0"@H__26@@H__26@>@H__26@@H__26@
  <@H__26@@H__26@ http-equiv@H__26@=@H__26@"@H__26@X-UA-Compatible"@H__26@@H__26@ content@H__26@=@H__26@"@H__26@ie=edge"@H__26@@H__26@>@H__26@@H__26@
  <@H__26@title@H__26@>@H__26@@H__26@Document</@H__26@title@H__26@>@H__26@@H__26@
</@H__26@head@H__26@>@H__26@@H__26@
<@H__26@body@H__26@>@H__26@@H__26@
  <@H__26@div@H__26@ id@H__26@=@H__26@"@H__26@app"@H__26@@H__26@>@H__26@@H__26@
    <@H__26@div@H__26@>@H__26@@H__26@ 我是: {{ name }},我的今年:{{ age }}</@H__26@div@H__26@>@H__26@@H__26@
    <@H__26@div@H__26@>@H__26@@H__26@{{countPlusAge}}</@H__26@div@H__26@>@H__26@@H__26@
  </@H__26@div@H__26@>@H__26@@H__26@
</@H__26@body@H__26@>@H__26@@H__26@
<@H__26@script@H__26@ src@H__26@=@H__26@"@H__26@https://unpkg.com/vue/dist/vue.js"@H__26@@H__26@>@H__26@@H__26@@H__26@</@H__26@script@H__26@>@H__26@@H__26@
<@H__26@script@H__26@ src@H__26@=@H__26@"@H__26@https://unpkg.com/vuex@3.1.2/dist/vuex.js"@H__26@@H__26@>@H__26@@H__26@@H__26@</@H__26@script@H__26@>@H__26@@H__26@
<@H__26@script@H__26@ type@H__26@=@H__26@"@H__26@text/javascript"@H__26@@H__26@>@H__26@@H__26@
  const@H__26@ store =@H__26@ new@H__26@ Vuex.@H__26@Store@H__26@(@H__26@{@H__26@
    state:@H__26@ {@H__26@
      name:@H__26@ '句号'@H__26@,@H__26@
      age:@H__26@ 
    }@H__26@
  }@H__26@)@H__26@
  var@H__26@ vm =@H__26@ new@H__26@ Vue@H__26@(@H__26@{@H__26@
    el:@H__26@ '#app'@H__26@,@H__26@
    store,@H__26@
    data@H__26@(@H__26@)@H__26@ {@H__26@
      return@H__26@ {@H__26@
        count:@H__26@ 
      }@H__26@
    }@H__26@,@H__26@
    computed:@H__26@ Vuex.@H__26@mapState@H__26@(@H__26@{@H__26@
      // 箭头可使更简练@H__26@
      name:@H__26@ state =>@H__26@ state.@H__26@name,@H__26@

       // 传字符串参数 'age' 等同于 `state => state.age`@H__26@
      age:@H__26@ 'age'@H__26@,@H__26@

      // 为了能够使用 `this` 局部状态,必须使用常规@H__26@
      countPlusAge@H__26@ (@H__26@state)@H__26@ {@H__26@
        return@H__26@ state.@H__26@age +@H__26@ this@H__26@.@H__26@count
      }@H__26@
    }@H__26@)@H__26@
  }@H__26@)@H__26@
@H__26@</@H__26@script@H__26@>@H__26@@H__26@
</@H__26@html@H__26@>@H__26@@H__26@

解释
JS 第 4-9 行,我们定义了仓库 store。
JS 第 12 行,创建 Vue 实例的时候传入 store。
JS 第 18-28 行,利用计算分别返回 name、age、countPlusAge。

当映射的计算的与 state 的子节点相同时,我们也可以给 mapState 传字符串数组。

computed:@H__26@ Vuex.@H__26@mapState@H__26@(@H__26@[@H__26@
  // 映射 this.age 为 store.state.age@H__26@
  'age'@H__26@,@H__26@
   // 映射 this.name 为 store.state.name@H__26@
  'name'@H__26@
]@H__26@)@H__26@
// ===等同于===@H__26@
computed:@H__26@  Vuex.@H__26@mapState@H__26@(@H__26@{@H__26@age:@H__26@'age'@H__26@,@H__26@ name:@H__26@ 'name'@H__26@}@H__26@)@H__26@
// @H__26@

mapState 返回的是对象。我们如何将它与局部计算混合使用呢?通常,我们需要使用工具将多个对象合并为,以使我们可以将最终对象传给 computed 。但是自从有了对象展开运算符,我们可以极大地简化写法:

computed:@H__26@ {@H__26@
  localComputed@H__26@ (@H__26@)@H__26@ {@H__26@ /* ... */@H__26@ }@H__26@,@H__26@

  // 使用对象展开运算符将此对象混入到外部对象中@H__26@
  ...@H__26@Vuex.@H__26@mapState@H__26@(@H__26@{@H__26@
    // ...@H__26@
  }@H__26@)@H__26@
}@H__26@

本节,我们带大家学习了 Vuex 中 state 的使用方式。主要知识点有以下几点:


联系我
置顶