最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

VUEX 的使用学习二: state

来源:博客园


【资料图】

转载请注明出处:

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

状态state用于存储所有组件的数据。

管理数据

// 初始化vuex对象const store = new vuex.Store({  state: {    // 管理数据    count: 0  }})

第一种访问方式

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

在组件获取state的数据:原始用法插值表达式

A组件 state的数据:{{$store.state.count}}
A组件 state的数据:{{count}}

使用计算属性:

// 把state中数据,定义在组件内的计算属性中computed: {  // 1. 最完整的写法  // count: function () {  //   return this.$store.state.count  // },  // 2. 缩写  count () {    return this.$store.state.count  }}// 不能使用箭头函数  this指向的不是vue实例

注意:

- state中的数据是自定义的,但是state属性名是固定的    -获取数据可以通过 $store.state    - 可以使用计算属性优化模板中获取数据的方式    - 计算属性不可以使用箭头函数(箭头函数本身是没有this的,实际上用的是父级函数中的this)

第二种方式 mapState:

把vuex中的state数据映射到组件的计算属性中。

使用方法:

1.从vuex中按需求导入mapState函数import {mapState} from "vuex"通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性2. 将全局数据,映射为当前组件的计算属性,mapState参数是一个数组computed :{ ...mapState(["count"]) }

使用示例:

<script>import { mapState, mapGetters } from "vuex"export default {  name: "app",  data() {    return {}  },  created() {  },  computed: {    ...mapState(["inputValue"]),  },}  

关键词: 数据名称 是固定的 可以使用