vuex的基础用法及核心

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说运用vuex更方便管理我们的值统一管理和维护各个vue组件的可变化状态(可以理解成 vue 组件里的某些 data)

vuex有五个核心概念state、getters、mutations、 actions,、modules

state：是一个单一的状态叔可以说相当于把vue组件中data中定义的转到了state中去这样就是全局数据整个项目都可以使用
getter：用来改变state中的数据值可以认为是 store 的计算属性就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。（组件中的computed不是全局，是属于组件内部的）
mutation：是用于提交改变state中定义数据的属性值
action：提交的是mutation,用commit提交而不是直接变更状态，可以包含任意异步出操作
module：vuex拆分成多个模块每个模块拥有自己的 state、mutation、action、getter

const store = new Vuex.Store({
    state: {
    //在这里写要定义在data中的
        count:0
    }
})
const app = new Vue({
	//使用拿出定义在vuex中的count用计算属性
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

通过getters可以派生出一些新的状态
const store =new Vuex.Store({
	state:{
		//需要的数据源
		todos:[
			{id:1,text;'...',done:true},
			{id:2,text;'...',done:true},
		]
	},
	//通过此方法对todos数据源进行过滤，拿到新的数据源赋值给doneTodos
	getters:{
		doneTodos:state=>{
			return state.todos.filter(tod0=>todo.done)
		}
	},
})

mutations
更改Vuex的store中的状态的唯一方法，也只能通过mutations去改变值
const store=new Vux.Store({
	state:{
		count:1
	},
	mutations:{
		//随便自定义一个函数，参数是默认state  在自定义后还有一个是传来的参数
		add(state){
		//通过state.count拿到count属性值在进行自增
			state.count++
		}
	}，
	actions:{
	// actions也定义了increment;它默认接收一个context；context它可以直接去调用commit方法
  // 这都是vuex全局注册进来的
  // 通过context这个对象可以调用我们的commit来提交一个increment；这句话执行之后就会去调用mutation里面的increment方法,就会把count的值++；
		add(context){
			//通过commit的方法提交一个add,这时就会调用mutation中的add方法就会加加1
			context.commit("add")
		}
	}
})

最后我们来了解一下Modules
面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。

const moduleA = { // 通过const来定义一个moduleA,再定义一个moduleB；每个模块都包括
 // stste,mutation,action,getters等;
 // 只是说这些状态都是在A模块里面运用的；B模块里面也会应用到；但是如果我们的项目并不需要太多的状态管理；那么我们完全可以把它定义到vuex里面去；不需要进行拆分；
 // 只有在我们的页面里面概念比较多，而又不想和别的页面进行混淆的时候；
 // 大家可以把它拆分成每个模块
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
 
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
 
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

大致流程：组件中通过dispatch去触发actions定义的函数->接着actions通过commit去提交mutations然后去改变state值

vuex的基础用法及核心

Vuex 是什么？

猜你喜欢