yarn install
yarn serve
yarn build
yarn lint
- State 数据源 存储状态
- Mutation 同步修改状态值,一般用于页面交互导致的变更
- Action 异步修改状态值,一般用于接口请求后修改值
- Getter 取值或其衍生值
使用方法
- 在 store 中引入 Vue 和 Vuex
Vue.use(Vuex)
- 在 main.js 中引入 store
- 在 new Vue 中传入 store
Vue.use
执行时需提供 install 方法,该方法可获取一个传入参数 Vue
由于在每个组件中均能通过 this.$store
访问 vuex 中的组成内容,因此需要给组件中注入 store,最好时机就是在执行 install 时,通过 vue 的 mixin 注入
在 store 类中,构造函数中接收创建 store 时传入的参数并处理,主要是实现数据的双向绑定
在 install 中接收到了传入的 Vue,可以在构造函数中 new Vue,将 state 传入 data 中,让 Vue 监听变化
getters 也是直接在 this.$store 上访问的,在构造函数中也要对 getters 处理,将传入的 getters 赋值给 this.getters,还要保证可选参数正确传入
接下来分别实现 mutation、action,实现修改状态值
这两个是差不多的,都是要提交变更状态值
如通过调用 commit 来提交 Mutation,需要在 store 上实现 commit 方法
接收两个参数,一个是 mutationName,确定执行哪个 mutation 方法;一个是 payload,修改状态时可能用到的值,可以是值或对象
根据传入的 mutationName,在 this.mutations 中找到相应的方法,传入 state 和 payload 执行该方法即可
Action 也是一样,实现 dispatch 方法,接收 actionName 和 payload,this.actions 中找到对应的方法,传入 this 和 payload 执行该方法
完成简单示例,不包含 module 和对象形式的提交,仓库地址: