vuex 的基本使用(二) state的两种使用方式

state是提供唯一的公共数据源 所有共享的数据都要统一放到store的state中进行存储

组件访问

1. state中数据的第一种方式

 this.$store.state.全局数据名称

2. state中数据的第二种方式
   通过导入 mapState 函数 将当前组件需要的全局数据 映射为当前组件的 computed 计算属性

 // 从 vuex 中按需导入 mapState 函数
 import {mapState} from 'vuex'
 // 将全部数据 映射为当前组件的计算属性
 computed:{
     ...mapState(['count'])
 }

简单的实现一下以上两种方式

1. 首先新建一个项目
   在项目初始化的时候安装 vuex 这样项目就会默认有一个store文件 以及一个简单的项目结构
   
2. 新建完成 打开项目 在store文件里有一个index.js文件
   打开index.js在里面加入一个count值
   如下:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
})

3. 在components文件中新建两个文件
   通过state的两种方式去分别获取count值
   第一个文件的代码如下:

<template>
  <div>
    <h3>当前最新的count值为: {{this.$store.state.count}}</h3>
    <button>+1</button>
  </div>
</template>

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

第二个文件的代码如下:

<template>
  <div>
    <h3>当前最新的count值为:{{count}}</h3>
    <button>-1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'

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

这两个文件分别通过组件访问的两种方式去获取count的值

4. 在app.vue文件中引入这两个组件
   引入组件 注册组件 使用组件
   再运行项目
   在浏览器界面便能看到都获取到 count是0