vuex的数据渲染与修改浅析

1.vuex是什么？

用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据，并且在不同的组件中都可以实时修改它并且这份数据保持同步“。

2.如何使用state中的数据

在你创建好store这个仓库之后，并且在其中添加了相应的数据以及修改它的方法，你就可以在你的组件中使用这个仓库了。比如我们的store是这样最简单的一中：

在组件中渲染store中的数据

1.通过 this.$store来访问store中的state数据，比如我们在页面中使用一个p标签，在里面渲染store中的state中的数据， <p>{{count}}</p> ，此时这个count应该如何从store中拿出来了？

2.这时我们就需要在这个组件中获取store中的数据了。我们可以直接在本组件的计算属性computed中获取

3.然后p标签中的count就会渲染出store中的count的值 0 了。

如果你觉得这样写太麻烦了，我们就可以使用vuex的辅助函数mapState

在使用这个辅助函数之前我们需要引入这个辅助函数

import {mapState } from 'vuex'

最后同样是在计算属性中使用它， ...mapState(["count"]) ,这样同样可以达到上面的效果，如果有多个数据，那就直接在这个数组后面添加就行了。列如...mapState(["count","count1",...]) ,需要哪个数据直接拿出来用就可以了

3.如何修改state中的数据

首先我们要知道，官网虽然说修改state中的数据唯一方法就是提交 mutation。但是我们也可以直接修改state中的数据，列如this.$store.state.count = 1 ,这样同样修改了数据，但是最好不要这样，因为这样虽然修改了数据，但是这样可能造成一些问题，因为这样vuex监听不到你的修改过程。

言归正传，如何提交mutation了?

1.创建一个方法来提交mutation，比如最简单的点击事件触发某个方法，然后这个方法来提交mutation。 <button @click="Add()">+++</button>,当点击这个按钮时就回触发Add方法，而在Add方法中我们来提交mutation。

在vuex中提交mutation的方式就是使用this.$store.commit()方法，这个方法的参数就是你在store中的mutations中所写的你需要调用的方法。例如上图我们在mutations中创建的add方法，让count自增，所以完整的写法就是在Add方法中:this.$store.commit('add') , 这样当你点击按钮触发组件中的Add方法，这个方法中在通过this.$store.commit('add')方法来修改store中的数据。

如果你觉得这样也麻烦，同样有辅助函数来帮助你，还是一样，先引入这个辅助函数

import { mapMutations} from 'vuex'

然后在本组件的methods中调用它

...mapMutations(['add']), ,然后在按钮点击的时候直接触发add方法就好了，不需要在去触发Add方法了，例如： <button @click="add()">+++</button> ，这样也可以修改vuex中的数据。

总结

到此这篇关于vuex数据渲染与修改的文章就介绍到这了,更多相关vuex数据渲染与修改内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

    vuex数据改变,组件中页面不渲染 相信许多vuex新手都会遇到这样的问题: vuex数据更新后,插件中使用数据的地方没有更新 这样的代码 data() { return { tableData: this.$store.state.AdminInfo }; } 然后在 template 中使用 tableData <el-table :data="tableData" class="tablePst"> <el-table-column labe

  • 解决vue2.x中数据渲染以及vuex缓存的问题

    最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记. 在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户会先看到静态的内容(就是页面固定写死的),过一会才会有数据回来渲染,这体验是很差的,其实解决办法也很简单,就是用vue里的 v-if 来判断请求的数据是否返回... <div class="container&quo

  • vuex的数据渲染与修改浅析

    vuex的数据渲染与修改浅析

    1.vuex是什么? 用官方的话来说"Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化".而说的通俗易懂点就是"你想要在不同的组件中使用同一份数据,并且在不同的组件中都可以实时修改它并且这份数据保持同步". 2.如何使用state中的数据 在你创建好store这个仓库之后,并且在其中添加了相应的数据以及修改它的方法,你就可以在你的组件中使用这个仓库了.比如我们

  • Vue.js仿Metronic高级表格（二）数据渲染

    Vue.js仿Metronic高级表格（二）数据渲染

    上篇使用Vue.js制作仿Metronic高级表格(一)静态设计介绍了需求.原型设计以及静态页面实现,这篇讲解如何使用Vue渲染数据,实现动态展示. 表格数据 先定义一个数组来保存所有数据: var vm = new Vue({ el:'#content', data: { book_list: [ {id:1, name:"标准日本语", type: "文化", price:19.00, time: 1492502043}, {id:2, name:"微

  • Vuex实现数据增加和删除功能

    首先,我们要安装vuex,执行命令yarn add vuex 1.编写state数据 //vuex/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state = { bookList: [ {id: 1, name: '西游记'},{id: 2, name: '水浒传'}, {id: 3, name: '红楼梦'},{id: 4, name: '三国演义'} ] } export def

  • vuex中数据持久化插件vuex-persistedstate使用详解

    vuex中数据持久化插件vuex-persistedstate使用详解

    目录 数据持久化vuex-persistedstate使用 安装起步 配置使用 自定义存储方式 想使用cookie同理 使用vuex-persistedstate插件遇到的问题 数据持久化vuex-persistedstate使用 vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此.例如全局相关的,如登录状态.token.以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验. 安装起步 npm i vuex-per

  • React如何使用axios请求数据并把数据渲染到组件

    React如何使用axios请求数据并把数据渲染到组件

    目录 一.安装boostrap.axios 二.在src目录下新建一个List.js,在List.js中 三.在app.js中引入List.js并渲染 四.在create-react-app脚手架跑起来项目 开始这个实例之前需要对es6.react.axios有一定的了解 安装一个react项目的脚手架 create react-app 在开始之前,你可能需要安装 yarn. $ yarn create react-app antd-demo 工具会自动初始化一个脚手架并安装 React 项目的

  • 详解vue数据渲染出现闪烁问题

    今天在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况.经过多方查找我知道了要解决这个问题需要添加v-cloak指令,这时有一个问题困扰了我很久,我明明按照大家所说的加了v-for为什么还是没有用.后来折腾了很久才发现原因,先不说为什么,看看代码来: 在html中: <ul v-for="item in person"> <li v-cloak>{{item.name}}</li> </ul>

  • 给jqGrid数据行添加修改和删除操作链接（之一）

    给jqGrid数据行添加修改和删除操作链接（之一）

    我这里用的不是jqGrid的自带的编辑和删除操作,我已经把分页导航栏下的编辑,删除,搜索都取消掉了,就是这句$("#list1").navGrid("#pager1",{edit:false,del:false, search:false}), 然后在数据加载完成后,给每行添加了 修改和删除链接 jqGrid完成的事件是gridComplete:function(){}(可以理解为数据都准备好了), 因为从数据库获取到的json数据没有带修改和删除两项,所以在之后的

  • Vue 父子组件的数据传递、修改和更新方法

    父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c

  • Vue在页面数据渲染完成之后的调用方法

    在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度.之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现. nextTick:在下次 DOM 更新循环结束之后执行延迟回调. watch:用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调. 之前我是这样子使用nex

  • Vue监听数据渲染DOM完以后执行某个函数详解

    实例如下: vm.$watch('某data数据',function(val){ vm.$nextTick(function() { 某事件(); }); }) 以上这篇Vue监听数据渲染DOM完以后执行某个函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐