当项目中组件较多,结构复杂时,我们可以把它们的公共状态提取出来,放在vuex里面统一管理。
一个基本的vuex结构,store为存储的公共数据,mutations为修改数据的方法,actions是异步操作
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //store是存储数据,以及提供数据访问接口 export default new Vuex.Store({ state: { //存储数据 num: 1 }, getters: { //计算属性,对数据进行处理运算 getMyNum: function(state){ return state.num } }, mutations: { // 改变数据 add(state, payload) { state.num += payload; } }, actions: { //异步,{commit, dispatch}是一个解构 add2({commit, dispatch}, payload) { setTimeout(() => { //actions自己不更新,要调用mutations的方法更新 commit('add', payload); }, 1000) } } }) 复制代码
在组件中访问vuex里的数据使用 this.$store
<p>{{this.$store.state.num}}</p> <p>{{this.$store.getters.getMyNum}}</p> 复制代码
在组件中调用vuex的方法
this.$store.commit("add", 1); //(方法名,参数) this.$store.dispatch("add2", 2); //异步调用 复制代码
//自定义vuex let Vue; //数据存储 class Store { constructor(options) { this.vm = new Vue({ //放到vue里实现数据的监听 data: { state: options.state //传入的数据 } }) //getters let getters = options.getters; //获取传入的getters this.getters = {}; //定义当前的getters // 遍历传入的getters Object.keys(getters).forEach(getterName => { //getterName是定义的计算属性 //动态定义属性,定义到this.getters当前的getters Object.defineProperty(this.getters, getterName, { get: () => { //定义遍历的属性,并且返回执行传入的方法,传入的参数 return getters[getterName](this.state) } }) }) //修改数据 let actions = options.actions; this.actions = {}; Object.keys(actions).forEach(actionName => { //给this.actions添加函数,执行传入的actions的函数 this.actions[actionName] = (payload) => { actions[actionName](this, payload); } }) let mutations = options.mutations; this.mutations = {}; Object.keys(mutations).forEach(mutationName => { this.mutations[mutationName] = (payload) => { mutations[mutationName](this.state, payload); } }) } get state() { //增加访问的方法 return this.vm.state; } dispatch(type, payload) { this.actions[type](payload) } commit = (type, payload) => { //type是传入的参数名字,payload是参数 //找到mutations里的参数名字并执行 this.mutations[type](payload); } } //需要在所有的组件中添加$store对象,让它们可以使用this.$store.commit() const install = (v) => { Vue = v; Vue.mixin({ //混合,给所有子组件添加方法 beforeCreate() { //组件初始化之前 console.log(this.$options.name) //组件名字 if(this.$options && this.$options.store) { //有store一定是根组件 this.$store = this.$options.store }else{ //子组件,将父组件的store赋给它 this.$store = this.$parent && this.$parent.$store; } } }) } //导出插件 export default {install, Store} 复制代码
我来评几句
登录后评论已发表评论数()