Vuex简单使用学习一（State，Mutations）

最近在做一个vue项目发现一些组件间的存储有些混乱，抽了1.2天时间学习了Vuex做下学习记录

介绍Vuex几个参数

State         储存初始化数据

Getters      对State 里面的数据二次处理（对数据进行过滤类似filter的作用）比如State返回的为一个对象，我们想取对象中一个键的值用这个方法

Mutations   对数据进行计算的方法全部写在里面（类似computed） 在页面中触发时使用this.$store.commit('mutationName') 触发Mutations方法改变state的值

Actions      处理Mutations中已经写好的方法 其直接触发方式是 this.$store.dispatch(actionName)

一

安装 

npm install vuex --save

二

在main.js里面引用

import Vuex from 'vuex' 
Vue.use(Vuex)
const store=new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		increment(state){
			state.count++;
		},
		decrease(state){
			state.count--;
		}
		
	}
	
})
new Vue({
  el: '#app',
  router,
  store:store,
  template: '<App/>',
  components: { App},
})

 

store是vuex的配置

仓库store包含了应用数据（状态）和操作的过程

任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新

假如实现一个计时器，定义一个数据count初始是0

在任何组件调用直接通过$store.state.count读取

在组件内，来之store的数据只能读取，不能手动改变，改变store中数据的唯一途径就是显示地提交mustations

mustations是Vuex的第二个选项可以直接改变store里的数据，

在组件内调用通过this.$store.commit方法来执行mustations，例如this.$store.commit('increment')

mustations还可以接受第二个参数可以是字符串，数字或者对象类型

mutations:{
		increment(state，n=1){
			state.count+=n;
		}
		
	}

ps：ES6语法当没有传参是n默认为1

this.$store.commit('increment'，5)

也可以提交一个对象

mutations:{
		increment(state，params){
			state.count+=params.count;
		}
		
	}

this.$store.commit({

type：'increment'，

count：20

})

mustations中尽量不要异步操作数据，如果异步操作数据组件在commit后数据不能立即改变，而且不知道什么时候会改变