Vuex从入门到实战（二）—— 简单demo学会用两种方式使用State

news/2024/7/10 1:33:42 标签: vue, vuex, state

在Vuex中，State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

store/index.js
Vue.use(Vuex)

// new一个Vuex实例并暴露出去
export default new Vuex.Store({
  state: {
    count: 0
  }
})

一、组件如何访问State中的共享数据count?

statecountfont_17">第一种方式：this.$store.state.count

如果是在template中调用，则可以省略this，即：{{ $store.state.count}}

第二种方式：借助mapState，

先导入mapState，再通过mapState函数将当前组件需要的全局数据，映射为当前的computed计算属性：

import { mapState } from vuex
---------------------------------
computed: {
    // ...表示展开映射，意思就是将全局属性映射为当前组件的计算属性
    ...mapState(['count'])
}

使用时直接调用即可，{{ count }}，具体可见下面示例。

二、计数器demo示例

上节新建了项目vuex_demo1，我们直接在上面新增代码即可。

在store/index.js中添加共享数据count：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// new一个Vuex实例并暴露出去
export default new Vuex.Store({
  state: {
    count: 0
  }
})

删除components文件夹下原有文件，新增加法组件Addition和减法组件Subtraction；

Addition： 使用第一种方式获取count；

<template>
    <div>
        <p>当前count的值为：{{ $store.state.count}}</p>
        <button>+1</button>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

Subtraction: 使用第二种方式获取count；

<template>
    <div>
        <p>当前count的值为：{{ count }}</p>
        <button>-1</button>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

在App.vue修改成如下代码：

<template>
  <div>
    <my-addition></my-addition>
    <hr>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
// 引入组件千万不要加{}，否则报错组件未注册
import Addition from './components/Addition'
import Subtraction from './components/Subtraction'

export default {
  data () {
    return {}
  },
  components: {
    'my-addition': Addition,
    'my-subtraction': Subtraction
  }
}
</script>