vuex是干什么的？

最新推荐文章于 2024-04-08 19:47:41 发布

每逢佳节掉三根.

最新推荐文章于 2024-04-08 19:47:41 发布

阅读量1.5k

点赞数 1

分类专栏： vuex 文章标签： vuex

vuex 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、vuex是干什么的？
学习任何东西，必然绕不过去的一个话题，就是我们为什么要使用它，它解决了什么问题？

vuex是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。

vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。

2、vuex的“hello world”示例
由于数据状态在多个组件维护的困难性，vuex在维护数据状态的时候，使用的方法就是对一个“容器”进行维护。这个容器是一个状态数，用对象的方式来表示。

（1）、store
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
}
})
store是vuex的核心对象，它记录了整个vue应用的数据状态以及操作数据的方式。

（2）、state
state就是store操作的数据状态对象。

（3）、mutation
mutation提供了一种简单易用的同步的方式改变state的状态。

完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex学习</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body>
<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
</body>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
}
})

new Vue({
el:'#app',
store,
computed:{
count(){
return store.state.count;
}
},
methods:{
increment(){
store.commit('increment')
},
decrement () {
store.commit('decrement')
}
}
})
</script>

</html>

每逢佳节掉三根.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuex是干什么的？

1、vuex是干什么的？学习任何东西，必然绕不过去的一个话题，就是我们为什么要使用它，它解决了什么问题？vuex是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。2、vuex的“hello world”示例由于数据状态在多个...
复制链接

扫一扫