Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中,且子组件能通过 this.$store访问

  1. const app = new Vue({
  2. el: '#app',
  3. // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  4. store,
  5. components: { Counter },//子组件
  6. template: `
  7. <div class="app">
  8. <counter></counter>//引用子组件
  9. </div>
  10. `
  11. })
  12.  
  13. //子组件
  14. const Counter = {
  15. template: `<div>{{ count }}</div>`,
  16. computed: {
  17. count () {
  18. //调用state
  19. return this.$store.state.count
  20. }
  21. }
  22. }

 mapState

当一个组件需要获取多个状态时候,使用 mapState 辅助函数帮助我们生成计算属性,mapState 函数返回的是一个对象

  1. // 在单独构建的版本中辅助函数为 Vuex.mapState
  2. import { mapState } from 'vuex'
  3.  
  4. export default {
  5. //使用mapState
  6. computed: mapState({
  7. // 箭头函数可使代码更简练
  8. count: state => state.count,
  9.  
  10. // 传字符串参数 'count' 等同于 `state => state.count`
  11. countAlias: 'count',
  12.  
  13. // 为了能够使用 `this` 获取局部状态,必须使用常规函数
  14. countPlusLocalState (state) {
  15. return state.count + this.localCount
  16. }
  17.  })
    }
  1. //当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

  2. computed: mapState([
  3. // 映射 this.count 为 store.state.count
  4. 'count'
  5. ])

对象展开运算符...

...工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed 属性

  1. computed: {
  2. localComputed () { /* ... */ },
  3. //使用对象展开运算符将此对象混入到外部对象中
  4. ...mapState({
  5. // ...
  6. })
  7. }

组件仍然保有局部状态

  1. var vmA = new Vue({
  2. data: {
  3. privateState: {},//每个组件可以有自己的state
  4. sharedState: store.state
  5. }
  6. })

vuex-state的更多相关文章

  1. vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题

    简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...

  2. vue自学入门-5(vuex state)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  3. how to watch vuex state update

    how to watch vuex state update watch https://vuex.vuejs.org/api/#watch https://vuex.vuejs.org/guide/ ...

  4. weex里Vuex state使用storage持久化

    在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state. 先看下该模块介绍: stora ...

  5. Vuex state 状态浅解

    对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...

  6. vuex state使用

    访问vuex中的state值 方式1 <div>{{$store.state.count}}</div> 方式2 <template> <div id=&qu ...

  7. 万恶的浏览器缓存 Vuex state里面的成员改名后浏览器不会马上更新

    今天在用Vuex的时候,在state里面加了个名叫rootUrl的属性 但是怎么都取不到值,重新启动程序,ctrl+f5浏览器刷新都不行,纠结了大半上午,于是用console.log(store.ge ...

  8. Vue Vuex state mutations

    Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...

  9. vue v-model 与 vuex state数据绑定问题

    最近开发的项目 需要用input 的v-model 直接绑定到vuex的store数据 因为v-model 能与data的数据绑定 尝试了半天 代码如下 <template> <di ...

  10. [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js

    You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...

随机推荐

  1. C# 获取 mp3文件信息【包括:文件大小、歌曲长度、歌手、专辑】

    C# 获取 mp3文件信息[包括:文件大小.歌曲长度.歌手.专辑] 第一种方式:[代码已验证] // http://bbs.csdn.net/topics/390392612   string fil ...

  2. window中的attrib命令

    attrib -s -h -r autorun.infattrib +s +h +r autorun.infattrib -s -h -r my.icoattrib +s +h +r my.ico

  3. JS构造函数原理与原型

    1.创建对象有以下几种方式: ①.var obj = {}; ②.var obj = new Object(); ③.自定义构造函数,然后使用构造函数创建对象 [构造函数和普通函数的区别:函数名遵循大 ...

  4. IP通信基础学习第二周

    此周的课程学习应该算是我对此科目真正学校生涯的开始吧,尽管我对该科目仍感到很陌生. 课程一开头,老师就给我们简单的介绍了网络的定义.发展及其分类,重点讲了网络拓扑结构及其在局域网上具体的分层情况.该部 ...

  5. sql_mode 之 ignore_space

    用于忽略mysql系统函数名与之后的括号之间的空格. 还是给个形像的说明吧如:count   (*) 通过设置ignore_space 这个sql_mode 就可以把空格给忽略变成count(*) 1 ...

  6. Hopfield神经网络

    神经网络分类 多层神经网络:模式识别 相互连接型网络:通过联想记忆去除数据中的噪声 1982年提出的Hopfield神经网络是最典型的相互连结型网络. 联想记忆 当输入模式为某种状态时,输出端要给出与 ...

  7. Docker+Consul+Registrator 实现服务注册与发现

    Docker+Consul+Registrator实现服务注册与发现 逻辑图 实现nginx节点自动化加入容器IP代理 1.三台Consul agent server作为高可用通过Consul Tem ...

  8. IDEA设置(含永久破解IDEA)

    永久破解IDEA(很多license服务器都是非永久性的,太麻烦了) https://www.cnblogs.com/iathanasy/p/9469280.html,亲测. 在我们为 IDEA 等编 ...

  9. expect拷贝文件例子

    ----安装expectcd /tmp wget http://core.tcl.tk/tcl/zip/release/tcl.zipwget https://jaist.dl.sourceforge ...

  10. Servlet运行原理以及生命周期

    一.Servlet生命周期: Servlet加载.实例化.初始化.服务.销毁. 1.初始化init(): 当服务启动时,Servlet被装入tomcat或者其他服务器容器时执行(服务器容器从启动到停止 ...