vuex操作state对象的实例代码

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对象的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vuex与组件联合使用的方法

    官方定义: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.我的理解就是,vuex就是前端的数据库. 1.首先核心是store,是个仓库,包含着state,因此第一步需要新建一个store. 显示界面: 其中state就是仓库store,东西都存在这里. 2.从state中取数据,使用Lodash比较方便,语法如下: 也可以使用vuex的getters,语法; 官方文档还结束通过属性访问,通过方法访问等.https://vuex.vuejs.org/zh-cn/getters.h

  • 父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加载子组件,子组件在渲染的时候还没有获取到更新之后的related值,即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容. 我的解决办法: 父组件像子组件传值,当父组件执行了获取页面详情的方法之后,state值related更新,然后传给子组件,子组件再进行渲染,可以正常获取到.

  • 简单的三步vuex入门

    前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因, event bus 的成本反而比vuex还高, 所以技术选型上选用了 vuex, 但是不知道为什么, 团队里的一些新人一听到vuex,就开始退缩了, 因为vuex 很难? 真的很难吗? 今天我们用简单的3步来证明一下,vuex有多简单. 纯属个人经验,难免有不正确的地方,如有发现,欢迎指正! 这是一个针对新手的入门级教程.入门级教程.入门级教程 第零步 新建一个vue项目,安装vuex,这里不做过多介绍,能点进来的

  • vue router+vuex实现首页登录验证判断逻辑

    首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页.登录成功后,跳转到前一个页面. 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next . to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子. 下面以工作中写的一个判断为为例子: router.beforeEach(async (to, from, next) => {

  • 基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vuex, vue-router,vuex的权限控制教程,完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程,一步一步的走完整个流程. 首先从打开本地的服务localhost:8080开始,我们知道打开后会进入login页面,那么判断的依据是什么. 首先是token. 没有登陆的用户是获取不到token的,而登陆后的角色我们会将token存到local或者seesionStor

  • 详解vuex结合localstorage动态监听storage的变化

    需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化. 分析:vue无法监听localstorage的变化.localstorage主要用于不同页面间传值,vue适合组件间传值.对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据(vuex在页面刷新的时候存储的值会丢失,localstorage存储在本地浏览器中),可以采用vuex+localstorage的方式. 关于vuex和storage的区别 1.最重要的区别:vuex存储在内存,locals

  • vuex进阶知识点巩固

    一. Getter 我们先回忆一下上一篇的代码 computed:{ getName(){ return this.$store.state.name } } 这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.name 上经过复杂计算得来的,刚好这个getName要在好多个地方使用,那么我们就得复制好几份. vuex 给我们提供了 getter,请看代码 (文件位置 /src/store/index.js) import Vue from

  • vuex操作state对象的实例代码

    Vuex是什么? VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vue有五个核心概念,state, getters, mutations, actions, modules. 总结 state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法,同步! actions => 像一个装饰器,包裹mutations,使之可以

  • vuex获取state对象中值的所有方法小结(module中的state)

    vuex获取state对象中值的所有方法小结(module中的state)

    目录 vuex获取state对象中的值 直接从store实例取值 使用mapState取值的多种方法 使用module中的state vuex调用state数据 第一种 第二种:利用计算属性 第三种:mapstate 数组 第四种:mapState 对象 第五种:mapState 对象 解构 追加变量 vuex获取state对象中的值 直接从store实例取值 // main.js中,把store注册在根实例下,可使用this.$stroe.state直接取值 export default {

  • ASP.NET操作MySql数据库的实例代码讲解

    一.把MySql.Data.dll放到BIN目录下. 二.这是aspx.cs的全部源码,修改参数直接运行即可!   using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; publ

  • 使用Python操作excel文件的实例代码

    使用的类库 pip install openpyxl 操作实现 •工作簿操作 # coding: utf-8 from openpyxl import Workbook # 创建一个excel工作簿 wb = Workbook() # 打开一个工作簿 wb = load_workbook('test.xlsx') # 保存工作簿到文件 wb.save('save.xlsx') •工作表操作 # 获得当前的工作表对象 ws = wb.active # 通过工作表名称得到工作表对象 ws = wb.

  • C# 操作 access 数据库的实例代码

    随笔: (1)   命名空间    using System.Data.OleDb; (2)   连接字符串 private staticstring connStr = @"Provider= Microsoft.Ace.OLEDB.12.0;Data Source = d:\login.accdb"; 注意: a.DataSource = 数据库存放的路径(这里数据库放到了D盘目录下)              b. 2003版本的Access数据库链接字符串: privatest

  • C#操作字符串方法总结实例代码

    废话不多说了,具体代码如下所述: staticvoid Main(string[] args) { string s =""; //(1)字符访问(下标访问s[i]) s ="ABCD"; Console.WriteLine(s[0]); // 输出"A"; Console.WriteLine(s.Length); // 输出4 Console.WriteLine(); //(2)打散为字符数组(ToCharArray) s ="ABC

  • Mybatis和orcale update语句中接收参数为对象的实例代码

    Mybatis的 mapper.xml 中 update 语句使用 if 标签判断对像属性是否为空值. UserDTO是传过来参数的类型,userDTO是在mapperDao接口中给更新方法的参数起的别名. mapperDao.java int updata(@Param("userDTO") UserDTO userDTO); mapper.xml <update id="updata" parameterType="UserDTO"&g

  • 将List集合中的map对象转为List<对象>形式实例代码

    本文实例主要实现将List集合中的map对象转为List<对象>形式,下面是完整代码: import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import org.apache.commons.beanutils.ConvertUtils; import org.apache.commons.bea

  • Java对象流实例代码

    将日期对象和向量对象写入文件,然后从文件中读出并输出到屏幕上 package objstream; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.ObjectInputStream; import java.io

  • java操作Apache druid的实例代码

    1. 添加maven依赖包 <dependency> <groupId>org.apache.calcite.avatica</groupId> <artifactId>avatica-core</artifactId> <version>1.15.0</version> </dependency> 2. 编写工具类 package com.hnu.druid; import org.apache.calcit

随机推荐