快速搞懂Vuex(状态管理模式)以及vuex+elementUI实战案例任务列表

Vuex（Vue状态管理模式）

Vuex的介绍

Vuex 是一个专门为Vue.js 应用程序开发的状态管理模式。他采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可以预测的方式发生变化。说白了就是，当我们面对一些中大型项目时，各个组件之间传参就会变的比较复杂，这时，使用Vuex来进行参数的集中管理就很方便。

Vuex的安装

当我们创建vue项目时，可以选择手动安装vuex，如果未选择vuex，也可以进行npm安装

npm install vuex -s

然后在项目的src目录创建一个store文件夹，在该文件夹里面创建一个index.js文件

Vuex的使用

先初始化store中index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'

// 挂载vuex
Vue.use(Vuex)

// 创建Vuex对象
export default new Vuex.Store({
  state: {
    
  },
  mutations: {
   
  },
  actions: {
    
  },
  getters: {
    
  },
  modules: {
    
  }
})

打开main.js进行挂载Vue实例

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

接下来就可以使用vuex了，下面介绍vuex的中的核心，state、mutations、actions、getters、modules

State

State提供唯一的的公共数据源，所有共享的数据都要统一放到Store中的State中进行存储

// 创建store数据源，提供唯一的公共数据
const store = new Vuex.store({
  state: { count: 0 }
})

组件中访问State中数据的第一种方式

this.$store.state.count

组件访问State中数据的第二种方式

// 1. 从vuex中按需导入mapState函数
import { mapState } from 'vuex'
// 2. 通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算数属性
computed: {
  ...mapState(['count'])
}

Mutation

Mutations用于变更Store中的数据

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据
• 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

用法一：

// 定义Mutations
const store = new Vuex.store({
  state: {
    count: 0 
 },
  mutations: {
    add(state) {
      // 变更状态
      state.count++
    }
  }
})

// 触发Mutations
methods: {
	handle(){
    // 触发mutations的第一种方式
    this.$store.commit('add')
  }
}

触发Mutations时传递参数

// 定义Mutations
const store = new Vuex.store({
  state: {
    count: 0 
 },
  mutations: {
    addN(state, step) {
      // 变更状态
      state.count += step
    }
  }
})

// 触发Mutations
methods: {
	handle2(){
    // commit函数的作用，就是调用某个mutation函数
    this.$store.commit('addN',3)
  }
}

触发mutations用法二：

// 1. 从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'
// 2. 通过刚才导入的mapMutations函数，将当前组件需要的mutations，映射为当前组件的methods方法
methods: {
  ...mapMutations(['add','addN'])
}

Action

Action用于处理异步任务

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据

用法一：

// 定义Action
const store = new Vuex.Store({
  mutations: {
		add(state) {
      state.count++
    }
  },
  actions: {
    addAsync(context) {
			setTimeout(() => {
        context.commit('add')
      },1000)
    }
  }
})

// 触发Action
methods: {
	handle() {
		// 触发action的第一种方式
    this.$store.dispatch('addAsync')
	}
}

触发actions异步任务时携带参数

// 定义Action
const store = new Vuex.Store({
  mutations: {
		addN(state, step) {
      state.count += step
    }
  },
  actions: {
    addNAsync(context, step) {
			setTimeout(() => {
        context.commit('addN', step)
      },1000)
    }
  }
})

// 触发Action
methods: {
	handle() {
		// 触发action的第一种方式
    this.$store.dispatch('addNAsync', 5)
	}
}

触发action用法二：

// 1. 从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'
// 2. 通过刚才导入的mapActions函数，将当前组件需要的actions，映射为当前组件的methods方法
methods: {
  ...mapActions(['addAsync','addNAsync'])
}

Getter

Getter用于对Store中的数据进行加工处理形成新的数据，类似于vue中的计算属性

Store中的数据发生变化，Getter中的数据也会跟着变化

// 定义Getter
const store = new Vuex.store({
  state: {
		count: 0
  },
  getters: {
		showNum: state => {
      return '当前最新的数量是[' + state.count + ']'
    }
  }
})

使用getters的第一种方式

this.$store.getters.showNum

使用getters的第二种方式

import { mapGeters } from 'vuex'
computed: {
  ...mapGetters(['showNum'])
}

Models

当项目非常庞大时，状态非常多，可以采用模块化的状态管理模式。Vuex允许我们将store分割成模块。每个模块拥有自己的state、mutation、aciton、getter、甚至是嵌套子模块

const moduleA = {
  state: () => ({
    count: 0
	}),
  mutations: {
    
  },
  actions: {
    
	},
  getters: {
    
  }
}
const moduleB = {
  state: () => ({
    count: 0
	}),
  mutations: {
    
  },
  actions: {
    
	},
  getters: {
    
  }
}

const store = new Vuex.Store({
  modules: {
		a: moduleA,
    b: moduleB
  }
})

组件内调用模块的状态

this.$store.state.a
this.$store.state.b

嵌套子模块

// users.js
const state = {
	added: []
}
const getters = {

},
const mutations = {
  
},
const actions = {
  
}
export default {
	state,
  getters,
  mutations,
  actions
}

然后在index.js中引入

import Vuex from 'vuex'
import users from './modules/users'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
		users 
  }
})

这里有一个专门使用vuex和elementUI制作的任务列表案例，主要通过vuex来传递数据

案例演示

案例源代码已上传至gitee(码云)
gitee地址 https://gitee.com/yinlululu/vuex-tasklist.git 有需要练习的可以下载