vuex操作state对象的实例代码


Posted in Javascript onApril 25, 2018

Vuex是什么?

VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vue有五个核心概念,state, getters, mutations, actions, modules。

总结

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex

State

state即Vuex中的基本数据!

单一状态树

Vuex使用单一状态树,即用一个对象就包含了全部的状态数据。state作为构造器选项,定义了所有我们需要的基本状态参数。

在Vue组件中获得Vuex属性

•我们可以通过Vue的Computed获得Vuex的state,如下:

const store = new Vuex.Store({
  state: {
    count:0
  }
})
const app = new Vue({
  //..
  store,
  computed: {
    count: function(){
      return this.$store.state.count
    }
  },
  //..
})

下面看下vuex操作state对象的实例代码

每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。

每一个 Vuex 应用的核心就是 store(仓库)。

引用官方文档的两句话描述下vuex:

1,Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

2,你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

使用vuex里的状态

1,在根组件中引入store,那么子组件就可以通过this.$store.state.数据名字得到这个全局属性了。

我用的vue-cli创建的项目,App.vue就是根组件

App.vue的代码

<template>
 <div id="app">
   <h1>{{$store.state.count}}</h1>  
  <router-view/>
 </div>
</template>
<script>
 import store from '@/vuex/store';
export default {
 name: 'App',
 store
}
</script>
<style>
</style>

在component文件夹下Count.vue代码

<template>
 <div>
   <h3>{{this.$store.state.count}}</h3>
 </div>
</template>
<script> 
  export default {
    name:'count',
  }
</script>
<style scoped>
</style>

store.js的代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
 count: 1
}
export default new Vuex.Store({
 state,
})

2,通过mapState辅助函数得到全局属性

这种方式的好处是直接通过属性名就可以使用得到属性值了。

将Component.vue的代码进行改变

<template>
 <div>
   <h3>{{this.$store.state.count}}--{{count}}</h3>
  <h4>{{index2}}</h4>
 </div>
</template>
<script> 
  import { mapState,mapMutations,mapGetters } from "vuex";
  export default {
    name:'count',
    data:function(){
      return {
        index:10
      }
    },
    //通过对象展开运算符vuex里的属性可以与组件局部属性混用。
    computed:{...mapState(['count']),
      index2() {
        return this.index+30;
      }  
    } ,
  }
</script>
<style scoped>
</style>

总结

以上所述是小编给大家介绍的vuex操作state对象的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
vue2中使用less简易教程
Mar 27 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 #Javascript
你点的 ES6一些小技巧,请查收
Apr 25 #Javascript
vue 组件使用中的一些细节点
Apr 25 #Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 #Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 #Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 #Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
You might like
php面向对象编程self和static的区别
2016/05/08 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
JQueryDOM之样式操作
2019/03/27 jQuery
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python3处理HTTP请求的实例
2018/05/10 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
法人代表委托书
2014/04/04 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
个人租房协议书范本
2014/09/30 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript