Vue - Vuex

Vuex

搭建环境

安装vuex

npm i vuex 

1. 在main.js中使用vuex

//引入store
import store from './store'
new Vue({
	render:h=>h(App)
	store
})

2. 在src目录下面创建一个叫做store/index.js

//该文件用于创建Vuex中最为核心的store
//引入Vuex
import Vue from 'vue'
import Vuex from 'vuex'
//actions
const actions = {}
//mutations
const mutations = {}
//state
const state = {}
//使用vuex插件
Vue.use(Vuex)
//创建store并暴露
export default new Vuex.Store({
	actions,
	mutations,
	state
})

vuex原理状态图

步骤

1. 在页面方法中定义一个函数发起一个dispatch

methods:{
	increase(){
		this.$store.dispatch('jia',this.n)
	}
}

2. 在index.js中的actions里面提交commit

const actions = {
	jia(context,value){
		context.commit('JIA',value);
	}
}

3. 在index.js中的mutations里面操作state中的数据

const mutations = {
	JIA(state,value){
		state.sum += value;
	}
}

getters配置项

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

const getters = {
	doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
}

mapState & mapGetters

import { mapState,mapGetters } from 'vuex'

computed:{
	// 借助mapState生成计算属性，从State中读取数据（对象写法）
	...mapState({'he':'sum',xuexiao:'school',xueke:'subject'}); 
	// 借助mapState生成计算属性，从State中读取数据（数组写法）
	...mapState(['sum','school','subject']); 

	// 借助mmapGetters生成计算属性（对象写法）
	...mapGetters({bigSum:'bigSum'}); 
	// 借助mapGetters生成计算属性（数组写法）
	...mapGetters(['bigSum']); 
}

mapMutations & mapActions

import { mapMutations,mapActions } from 'vuex'

computed:{
	// 借助mapActions生成对应的方法（对象写法）
	...mapActions({increamentOdd:'jiaOdd',decrementWait:'jiaWait'}); 
	// 借助mapActions生成对应的方法（数组写法）
	...mapActions(['jiaOdd','jiaWait']); 

	// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
	...mapMutations({increament:'JIA',decrement:'JIAN'}); 
	// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）
	...mapState(['JIA','JIAN']); 
}

vue模块化+namespaced

//index.js
const optionsOne = {
	namespaced:true,
	actions:{},
	mutations:{},
	state:{},
	getters:{}
}
const optionsTwo = {
	namespaced:true,
	actions:{},
	mutations:{},
	state:{},
	getters:{}
}
export default new Vuex.Store({
	modules:{
		optionsOne,
		optionsTwo,
	}
})

import { mapState } from 'vuex'

computed:{
	...mapState('optionsOne',['sum','school','subject']); 
}

methods:{
	add(){
		this.$store.commit('optionTwo/ADD+PERSON',personPbj);
	}
}