vuex中如何操作state对象

vuex中如何操作state对象

本篇内容主要讲解“vuex中如何操作state对象”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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">     <h2>{{$store.state.count}}</h2>      <router-view/>   </div>  </template>  <script>   import store from '@/vuex/store';  export default {   name: 'App',   store  }  </script>  <style>  </style>

在component文件夹下Count.vue代码

<template>   <div>     <h4>{{this.$store.state.count}}</h4>   </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>     <h4>{{this.$store.state.count}}--{{count}}</h4>    <h5>{{index2}}</h5>   </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对象”有了更深的了解，不妨来实际操作一番吧！这里是高防服务器网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[