Vuex学习总结

一.vuex是什么
vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件间数据的共享
好处:1.能够在vuex中,集中管理共享的数据,易于开发和后期维护 2.能够高效地实现组件之间的数据共享,提高开发效率 3.存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步.
二.如何安装,引入 vuex 步骤
1.安装 npm install vuex --save
2. src 里面创建 store 文件夹,创建 index.js 配置 vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
	//存放的内容所有组件都可以访问,类似于data
	name:"张三'
	},
  mutations: {},
  actions: {},
  modules: {},
});

3.在 main.js

import store from "./store";   // 引入 store

Vue.config.productionTip = false;

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

三. vuex 的核心概念
1.state
提供唯一的公共数据源,所有共享数据都要统一放到 Store 中的 state 进行存储,相当于 data 数据

组件访问 State 中的数据
第一种
this.$store.state   // 全局数据名称
this.$store.state.name  // 访问state里面的name
第二种
1.从vuex中按需导入 mapState 函数
import {mapState} from 'vuex'
2.通过刚才导入的 mapState 函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed:{
	...mapState(['name'])
}

注意点:在其他方法中不要直接修改 state 里面的值,想要修改使用Mutation
2.mutation
用于变更 state 中的数据
提交更新数据的方法,必须是同步的(如果需要异步使用 action )
通过这个方式虽然操作起来稍微繁琐一些,但是可以集中监听所有数据的变化

第一种触发
// 定义mutation
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		// 第一个参数是 state 对象  第二个参数是传递的参数
		add(state,va){
			state.count += va
		}
	}
})
// 触发 mutation
methods:{
	aa(){
		// add是 mutation 里面的方法
		this.$store.commit('add')
	}
}
第二种触发
1.从 vuex 中按需导入 mapMutations 函数
import {mapMutations} from 'vuex'
2.将制定的mutations函数,映射为当前组件的methods函数中
methods:{
	...mapMutations(['add'])
}

commit 用来触发 mutation 里面方法用的
this.$store.commit('mutations方法名',值)

3.action
用于异步操作
与mutation功能大致相同,不同之处在与action提交的是mutation,而不是直接变更状态,可以包含异步操作
注意点:如果通过异步操作变更数据,必须通过action,而不能通过mutation,但是在action中还是要通过触发mutation的方式间接变更数据

// 定义 action
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		add(state,num){
			state.count += num
		}
	},
	actions:{
		// 第一个参数是context 第二个参数是传递的参数
		addAsync(context){
			setTimeout(()=>{
				context.commit("add",1000) // commit用来触发mutation里面方法的
			})
		}
	}
})
触发action:
第一种触发
methods:{
	abc(){
		// addAsync 是actions里面的方法
		// dispatch 用来触发action里面的方法
		this.$store.dispatch('addAsync')
	}
}
第二种触发
1.从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
2.将制定的mapActions函数,映射为当前组件的methods函数中
methods:{
	...mapAction(['addAsync'])
}

4.getter
从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法,会返回一个新数据,不会影响到state里面的老数据,
store中的数据发生变化,getter的数据也会跟着变化

const store = new Vuex.store({
	state:{
		count:0
	},
	getters:{
		userId:function(state){
			return state.count * 2
		}
	}
})
触发方式:
第一种
this.$store.getters.userId
第二种
import {mapGetters} from 'vuex'
computed:{
	...mapGetters(['userId'])
}
使用  {{userId}}

5.modules 模块化vuex
可以让每一个模块拥有自己的state,mutation,action,getters使得结构非常清晰,方便管理
什么情况下使用vuex:1.多个视图依赖于同一状态(特指依赖多层嵌套组件的某一状态) 2. 来自不同视图的行为需要变更同一状态
一般结构如下:

const moduleA = {
 state: { count:0 },
 mutations: { 
	changeName(state) {
  		state.name = '李四';
    }
 },
 actions: { 
	aUpdateName(context, payload2) {
      setTimeout(() => {
        context.commit('UpdateName',"payload1");
        console.log(payload2);
      }, 1000);
    }
 },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }
 
const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB
 })
 // 使用
 其他组件调用 (获取 state 的变量需要加上引入的 module的别名)
 $store.state.a.count
 $store.state.b
methods:{
	change(){
		this.$store.commit('changeName')
	},
	Update(){
		this.$store.dispatch("aUpdateName","payload2")
	}
}