当前位置:首页 > 编程教程 > vue技术文章 > vuex vue简单使用知识点总结

vuex vue简单使用方法

  • 发布时间:
  • 作者:码农之家
  • 点击:170

这篇文章主要知识点是关于vuex、vue、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js快速入门
  • 类型:Web前端大小:186.6 MB格式:PDF作者:申思维
立即下载

vuex vue简单使用知识点总结

vue概念:vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据;

配置vuex的步骤:

1、运行cnpm i vuex -S

2、导包

import Vuex from 'vuex'

3、将vuex注册到vue中

Vue.use(Vuex)

4、new Vuex.Store() 实例,得到一个 数据仓储对象

var store = new Vuex.Store({
 state: {
  // 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的
  // 如果在 组件中,想要访问,store 中的数据,只能通过 this.$store.state.*** 来访问
  count: 0
 },
 mutations: {
  // 注意: 如果要操作 store 中的 state 值,只能通过 调用 mutations 提供的方法,才能操作对应的数据,不推荐直接操作 state 中的数据,因为 万一导致了数据的紊乱,不能快速定位到错误的原因,因为,每个组件都可能有操作数据的方法;
  increment(state) {
   state.count++
  },
  // 注意: 如果组件想要调用 mutations 中的方法,只能使用 this.$store.commit('方法名')
  // 这种 调用 mutations 方法的格式,和 this.$emit('父组件中方法名')
  subtract(state, obj) {
   // 注意: mutations 的 函数参数列表中,最多支持两个参数,其中,参数1: 是 state 状态; 参数2: 通过 commit 提交过来的参数;
   console.log(obj)
   state.count -= (obj.c + obj.d)
  }
 },
 getters: {
  // 注意:这里的 getters, 只负责 对外提供数据,不负责 修改数据,如果想要修改 state 中的数据,请 去找 mutations
  optCount: function (state) {
   return '当前最新的count值是:' + state.count
  }
  // 经过咱们回顾对比,发现 getters 中的方法, 和组件中的过滤器比较类似,因为 过滤器和 getters 都没有修改原数据, 都是把原数据做了一层包装,提供给了 调用者;
  // 其次, getters 也和 computed 比较像, 只要 state 中的数据发生变化了,那么,如果 getters 正好也引用了这个数据,那么 就会立即触发 getters 的重新求值;
 }
})

总结:

1. state中的数据,不能直接修改,如果想要修改,必须通过 mutations

2. 如果组件想要直接 从 state 上获取数据: 需要 this.$store.state.***

3. 如果 组件,想要修改数据,必须使用 mutations 提供的方法,需要通过 this.$store.commit('方法的名称', 唯一的一个参数)

4. 如果 store 中 state 上的数据, 在对外提供的时候,需要做一层包装,那么 ,推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.***

以上就是本次介绍的全部知识点内容,感谢大家的学习和对码农之家的支持。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • vuex的实例用法教程
  • 如何运用sessionStorage解决vuex页面刷新后数据被清除的问题
  • vue2.0+vuex的日期选择组件功能实现方法
  • 详解Vue递归组件+Vuex开发树形组件Tree--递归组件
  • vue状态管理模式vuex知识点总结
  • 解析Vue2.0基于vue-cli+webpack Vuex的用法
  • vuex 相关电子书
    学习笔记
    网友NO.605554

    vue--vuex详解

    Vuex 什么是Vuex? 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解:Vuex是用来管理组件之间通信的一个插件 为什么要用Vuex? 我们知道组件之间是独立的,组件之间想要实现通信,我目前知道的就只有props选项,但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢?嗯..,方法应该有。抛开怎么实现的问题,试想一下,当做中大型项目时,面对一大堆组件之间的通信,还有一大堆的逻辑代码,会不会很抓狂??那为何不把组件之间共享的数据给“拎”出来,在一定的规则下管理这些数据呢? 这就是Vuex的基本思想了。 Vuex有什么特性? 怎么使用Vuex? 引入Vuex.js文件 创建实例: !DOCTYPE htmlhtml lang="en"he……

    网友NO.449267

    vuex 解决报错this.$store.commit is not a function的方法

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长,并且不利于组件的复用,提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网,觉得不是很好理解,有的时候我们只是需要动态的从一个组件中获取数据(官网称为“组件层级”:是个独立的控件,作用范围只在组件之内)然后想放到一个被官网称作“应用层级”(在项目的任意地方都可以随时获取和动态的修改,在修改之后,vue会为你的整个项目做更新)的地方。这是我最初来学习vue的原因,我并不想做一个前端数据结构库。。。 下面看看我一步一步的小例……

    网友NO.959386

    如何为vuex实现带参数的 getter和state.commit

    getter 带参数 参考: https://vuex.vuejs.org/guide/getters.html#method-style-access 或者: https://stackoverflow.com/questions/37763828/javascript-es6-double-arrow-functions 官方例子: getters: { // ... getTodoById: (state) = (id) = { return state.todos.find(todo = todo.id === id) }} 使用: store.getters.getTodoById(2) // - { id: 2, text: '...', done: false } stackoverflow 例子: new Vuex.Store({ getters: { someMethod(state){ var self = this; return function (args) { // return data from store with query on args and self as this }; } }}) commit 带参数 参考; https://stackoverflow.com/questions/46097687/vuex-passing-multiple-parameters-to-action 和 https://stackoverflow.com/questions/40522634/can-i-pass-parameters-in-computed-properties-in-vue-js 就是把第二个参数,以hash的形式传过来。 // vue页面调用: store.commit(INCREASE, { vid: vid // 这里可以容纳更多参数 })// store.js const mutations = { [INCREASE](state, data){ pair = state.p……

    网友NO.680904

    浅谈super-vuex使用体验

    vuex与super-vuex super-vuex是一套用于简化Vuex的数据架构。 适用场景 在繁重的中后台项目中,引入vuex的作用如下: 全局数据共享,组件数据逻辑解耦 数据业务接口分离 数据模块化管理,利于多人协作 super-vuex在这三种需求下都是和原生vuex的功能相同,在vuex原有功能上将mutation和action的定义和传导机制改良为函数的写法,在简易数组改动逻辑的使用上提供push、pop、shift、unshift、splice的方法,可以在与、组件中自动地完成mutation,以及数据引用的路径化,你可以通过load.allow去取到load模块下的allow属性。 使用体验 下面通过简单的demo比较下原生vuex和super-vuex使用细节上的不同。 一、状态模块化 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 Vuex: const moduleA = { state: { ... }, mutatio……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com