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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 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文件上传主要代码讲解
2013/09/30 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python 函数返回值的示例代码
2019/03/11 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python中的列表和元组区别分析
2020/12/30 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
茶叶生产计划书
2014/01/10 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
校园安全检查制度
2014/02/03 职场文书
终止劳动合同协议书
2014/04/14 职场文书
施工安全生产承诺书
2014/05/23 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python