vuex是什么？有什么用？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
Vuex可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。
vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。
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>
<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>更多web前端知识，请查阅 HTML中文网 ！！
以上就是vuex有什么用？的详细内容，更多请关注易知道|edz.cc其它相关文章！
