Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
以上是官网的解释,说的还是很官方,那么vuex到底是什么那
Vuex是一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。
vuex是一个存储数据的仓库，所有的组件都可以使用里面的数据，当数据发声了变化，所有的组件中用到的数据都会发声变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../vue.js"></script>
<script src="../vuex.js"></script>
</head>
<body>
<div id="app">
<p>根组件获取store中name的值是{{$store.state.name}}</p>
<child></child>
</div>
<script type="text/template" id="child">
<div>
<input type="text" v-model="names">
</div>
</script>
<script>
var child={
template:'#child',
computed:{
names:{
get(){
return this.$store.state.name;
},
set(val){
console.log(val)
this.$store.commit('change', val)
}
}
},
mounted(){
}
}
let store=new Vuex.Store({
state:{
name:'peter'
},
getters:{
},
mutations:{
change(state,params){
state.name=params
}
}
})
new Vue({
el:'#app',
store,
components:{
child
}
})
</script>
</body>
</html>结果如下：
之前我们如果需要在子组件改变数据的时候，有两种方法，1.自定义事件，2.通过sync修饰符，但是通过vuex的话我们直接更改vuex中的值就可以了
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接