vuex操作state对象的实例代码

2023-09-13 17:15:05 157

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，如下：

conststore=newVuex.Store({
state:{
count:0
}
})
constapp=newVue({
//..
store,
computed:{
count:function(){
returnthis.$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的代码

在component文件夹下Count.vue代码

store.js的代码

importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex);
conststate={
count:1
}
exportdefaultnewVuex.Store({
state，
})

2，通过mapState辅助函数得到全局属性

这种方式的好处是直接通过属性名就可以使用得到属性值了。

将Component.vue的代码进行改变

总结

以上所述是小编给大家介绍的vuex操作state对象的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vuex操作state对象的实例代码

{{$store.state.count}}

{{this.$store.state.count}}

{{this.$store.state.count}}--{{count}}

{{index2}}

随机推荐

vuex操作state对象的实例代码

{{$store.state.count}}

{{this.$store.state.count}}

{{this.$store.state.count}}--{{count}}

{{index2}}

热门推荐

随机推荐