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 相关文章推荐
javascript parseInt与Number函数的区别
Jan 21 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
openLayer4实现动态改变标注图标
Aug 17 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 读取shell管道传输过来的内容
2010/03/01 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
javascript新手语法小结
2008/06/15 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
template.js前端模板引擎使用详解
2017/10/10 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
JS打印彩色菱形的实例代码
2018/08/15 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python输出指定月份日历的方法
2015/04/23 Python
python读取Excel实例详解
2018/08/17 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
学年末自我鉴定
2014/01/21 职场文书
小学班级特色活动方案
2014/08/31 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
MongoDB 常用的crud操作语句
2021/06/20 MongoDB