这次给大家带来怎样使用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的代码
{{$store.state.count}}
在component文件夹下Count.vue代码
{{this.$store.state.count}}
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的代码进行改变
{{this.$store.state.count}}--{{count}}
{{index2}}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧!全书分十章,分十天讲完。 第一章是介绍易语言的安装,以及运行后的界面。同时介绍一个非常简单的小程序,以帮助用户入门学习。最后介绍编程的输入方法,以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题,如怎样编写一个1+2等于几的程序,并了解变量的概念,变量的有效范围,数据类型等知识。其后,您将跟着本书,编写一个自己的MP3播放器,认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第









