Vuex
1.当前在企业开发中我们遇到了两个问题:
- 1.如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
- 2.兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(非常麻烦)
解决方案: 使用Vuex
2.什么是Vuex?
vuex 是 Vue 配套的 公共数据管理工具，我们可以将共享的数据保存到 vuex 中，方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据
【注意点】:
- 必须在引入Vue之后再引入Vuex
- 只有需要共享的数据才放到vuex上, 不需要共享的数据依然放到组件自身的data上
- this.$store是指vuex实例,store就相当于组件中的data，但是它是可以共享的数据
- 3.在祖先组件中添加store的key保存Vuex对象
只要祖先组件中保存了Vuex对象 , 那么祖先组件和所有的后代组件就可以使用Vuex中保存的共享数据了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <!-- 1. 导入vuex，必须在vue.js之后导入--> <script src="vuex.js"></script> </head> <body> <div id="app"> <grandfather></grandfather> </div> <template id="grandfather"> <div> <p>{{this.$store.state.msg}}</p> <father> <son></son> </father> </div> </template> <template id="father"> <div> <p>{{this.$store.state.msg}}</p> <son></son> </div> </template> <template id="son"> <!-- this.$store是指vuex实例,这里指的state里的msg--> <div>{{this.$store.state.msg}}</div> </template> <script> // 2.创建vuex实例对象 const store=new Vuex.Store({ state:{ msg:"shanjialan" } }); Vue.component("grandfather",{ template:"#grandfather", // store就相当于组件中的data，但是它是可以共享的数据 store:store, components:{ "father":{ template: "#father", components: { "son":{ template:"#son" } } } } }) let vue=new Vue({ el:"#app", }); </script> </body> </html>
网络异常，图片无法展示
|
image.png
Vuex-修改共享数据
state: 用于保存共享数据,在Vuex中不推荐直接修改共享数据,而是在vuex中定义vuex实例的时候在mutations中进行数据修改，有利于在代码出bug时进行排错，提高效率
在执行mutations中定义的方法的时候, 系统会自动给这些方法传递一个state参数,state中就保存了共享的数据
步骤：
1.在vuex实例的state中声明共享数据
2.通过vuex对象的mutations来定义修改共享数据的方法
3.在组建的 methods中接收通过this.$store.commit("mutation中的方法")来调用修改数据的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <!-- 1. 导入vuex，必须在vue.js之后导入--> <script src="vuex.js"></script> </head> <body> <div id="app"> <grandfather></grandfather> </div> <template id="grandfather"> <div> <p>{{this.$store.state.msg}}</p> <father> <son></son> </father> </div> </template> <template id="father"> <div> <p>{{this.$store.state.msg}}</p> <son></son> </div> </template> <template id="son"> <!-- this.$store是指vuex实例,这里指的state里的msg--> <div>{{this.$store.state.msg}}</div> </template> <script> // 2.创建vuex实例对象 const store=new Vuex.Store({ state:{ msg:"shanjialan" } }); Vue.component("grandfather",{ template:"#grandfather", // store就相当于组件中的data，但是它是可以共享的数据 store:store, components:{ "father":{ template: "#father", components: { "son":{ template:"#son" } } } } }) let vue=new Vue({ el:"#app", }); </script> </body> </html>
Vuex的getters
1.什么是Vuex的getters?
Vuex的getters属性就和组件的计算属性一样相当于组件中的computed, 会将数据缓存起来, 只有数据发生变化才会重新计算,getters数据和computed一样，只有数据发生变化才会重新计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <!-- 1. 导入vuex，必须在vue.js之后导入--> <script src="vuex.js"></script> </head> <body> <div id="app"> <grandfather></grandfather> </div> <template id="grandfather"> <div> <p>{{this.$store.state.msg}}</p> <father> <son></son> </father> </div> </template> <template id="father"> <div> <p>{{this.$store.state.msg}}</p> <son></son> </div> </template> <template id="son"> <div> <!-- this.$store是指vuex实例,这里指的state里的msg--> <div>{{this.$store.getters.format}}</div> <div>{{this.$store.getters.format}}</div> <div>{{this.$store.getters.format}}</div> <div>{{this.$store.getters.format}}</div> </div> </template> <script> // 2.创建vuex实例对象 const store=new Vuex.Store({ state:{ msg:"shanjialan" }, getters:{ format(state){ console.log("getters function is execuated!"); return state.msg + "shanjialan-getters" } }, mutations:{} }); Vue.component("grandfather",{ template:"#grandfather", // store就相当于组件中的data，但是它是可以共享的数据 store:store, components:{ "father":{ template: "#father", components: { "son":{ template:"#son" } } } } }) let vue=new Vue({ el:"#app", }); </script> </body> </html>
