VUEX 的使用学习二: state

简介: VUEX 的使用学习二: state

转载请注明出处:

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

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


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

第一种访问方式

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

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

<!--原始用法-->

<div>A组件 state的数据:{{$store.state.count}}</div>


<!--使用计算属性-->

<div>A组件 state的数据:{{count}}</div>

  使用计算属性:

// 把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']) }

使用示例:
<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" />
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'app',
  data() {
    return {}
  },
  created() {
  },
  computed: {
    ...mapState(['inputValue']),
  },
}

 

  在网上找到一个demo 示例,可参考学习: https://gitee.com/xiangbaxiang/vue-store

 

标签: Vue学习使用

目录
相关文章
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
256 0
|
4月前
|
存储 JavaScript API
Vuex的魔法宝典:掌握State, Getters, Mutations和Actions,让状态管理不再是难题
【8月更文挑战第27天】Vuex是Vue.js应用程序的状态管理工具,通过集中式存储管理组件状态并确保状态按照预定义的规则发生变化。
161 0
|
2月前
|
存储 监控 JavaScript
Vuex 中 State 的作用
【10月更文挑战第15天】State 是 Vuex 状态管理体系中的核心组成部分,它为应用提供了可靠的数据共享和管理机制,保障了应用的正常运行和良好体验。理解和正确使用 State 是掌握 Vuex 状态管理的关键,对于构建复杂、高效的 Vue 应用具有重要意义。
|
2月前
|
监控 JavaScript
Vuex学习二:Vuex的重点属性学习,state、mutations、getters、actions、module。
这篇文章是关于Vuex状态管理库的深入学习,涵盖了其核心概念如state、getters、mutations、actions和modules,并通过实例代码展示了它们的使用和重要性。
36 1
|
2月前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
35 1
|
4月前
|
存储 前端开发
React 中的 state 和 props 有什么区别?
【8月更文挑战第31天】
56 0
|
7月前
v-model绑定vuex的state怎么实现?
v-model绑定vuex的state怎么实现?
|
7月前
|
存储 JavaScript 前端开发
vuex中的state
vuex中的state
54 0
|
7月前
|
存储 前端开发
react中 state和props的区别
react中 state和props的区别
53 0
|
7月前
|
前端开发
React State(状态)
React State(状态)