首先对页面进行分析,定义state,state应该为页面显示会用到的数据或者请求回来的数据的保存容器
然后可以先写mutations因为对state的直接我们比较容易思考。mutations有两个参数(state,{传过来的数据}),mutations是一个用于直接修改state的函数的对象。
那么mutations怎么触发?actions站出来了。actions包含n个用于间接更改数据的方法的对象。actions参数为{commit,state},因为actions一般需要拿到组件传来的state做一些判定,并且通过commit来通知对应的mutation作出相应commit(需要通知的mutation函数名,{需要传递的数据})。所以actions一般引入两样东西。发送ajax请求的方法模块和mutation-types.
那么现在考虑actions又是怎么触发的?component组件内通过this.$store.dispatch(‘actions中的函数名’),可以告诉actions,你去触发对应函数名的函数。actions接到通知又去commit对应的mutation函数,mutation从而修改状态。
最后的最后,一切都要回归到组件页面。页面中保存在state中的东西此时可以通过this.$store.state的方法拿到自己更新后的数据。当然也有一种更好的方法,那就是import {mapState} from ‘vuex’
需要拿到的数据放在computed内,…mapState([‘需要的数据名’],[]…),这种办法就可以拿到各种需要的数据并在模板中直接使用变量值做出渲染操作。
下面再说几个常用的思想,1slot是当一个组件多次复用并且在同一位置时使用的,其原理是从使用的组件向定义组件传递标签来实现。
2子组件的dispatch一般放在父级组件中,因为一般其父组件出现时子组件的数据我们就希望已经更新好了
3全局组件。使用方式是在入口index.js中首先引入,然后配置一下,Vue.component(‘组件名’,组件),最后在new Vue()中和data等并列等级写一下也就是注册一下。就可以在全局无需引入的使用了。