为什么使用vuex?
vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手。
需求:两个组件A和B,vuex维护的公共数据是 餐馆的名称 resturantName,默认餐馆名称是 飞歌餐馆,那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称 为 A餐馆,则B页面显示的将会是 A餐馆,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据
![034ff70b7880ffc7f934bdb95302168f.png](https://img-blog.csdnimg.cn/img_convert/034ff70b7880ffc7f934bdb95302168f.png)
![51d46a623e7551fe4a49ef0819372088.png](https://img-blog.csdnimg.cn/img_convert/51d46a623e7551fe4a49ef0819372088.png)
①使用 vue-cli脚手架工具创建一个工程项目,工程目录,创建组件A和组件B路由如下:
![6f825bdaca760528fb8a56b87b4a270c.png](https://img-blog.csdnimg.cn/img_convert/6f825bdaca760528fb8a56b87b4a270c.png)
路由如下:
import
app.vue
<
②开始使用vuex,新建一个 sotre文件夹,分开维护 actions mutations getters
![c8bbabfebf5e3c8d78d9c0e3fad34cb6.png](https://img-blog.csdnimg.cn/img_convert/c8bbabfebf5e3c8d78d9c0e3fad34cb6.png)
②在store/index.js文件中新建vuex 的store实例
*as的意思是 导入这个文件里面的所有内容,就不用一个个实例来导入了。
import
③actions
//
④mutations
//
⑤getters
//
⑥在main.js中导入 store实例
//
④在组件A中,定义点击事件,点击 修改 餐馆的名称,并把餐馆的名称在事件中用参数进行传递。
...mapactions 和 ...mapgetters都是vuex提供的语法糖,在底层已经封装好了,拿来就能用,简化了很多操作。
其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn',{参数}),mapActions中只需要指定方法名即可,参数省略。
...mapGetters(['resturantName'])相当于this.$store.getters.resturantName
<
B组件同理
<
最后:本文完全手打,如需转载请注明出处,谢谢,如果不明白的地方欢迎给我留言哦。
github仓库地址:https://github.com/byla678/vuexdemo.git
作者:飞歌Fly