vuex存储公共数据

1：首先先下载 vuex
npm i vuex -S
2：然后引入vuex
import Vuex from ‘vuex’
3：注册到Vue实例上
Vue.use(Vuex)
4：创造一个Vuex实例

var store = new Vuex.Store({
	state:{  //  这里相当于Vue实例中的data，用于存放数据
		msg: '我是公共的数据，来拿我呀QAQ' 
	},
	mutations:{ //  这里相当于Vue实例中的methods，用于定义方法 所有的方法都过来拿
		getMsg(state){  // state是个形参 是state对象里面的数据都可以拿到 不通过this来拿
			state.msg 
		}
	},
	getters:{ 
	 // 这里可以监听state的值 直接返回出去 只读取值 如果需要修改值 找mutations  需要return出去
		readMsg(state) {
				return '我是store里面的数据' + state.msg
		}
	}
})

那么组件中如何拿到store储存的公共的值呢？

直接在组件中 用插值表达式 可以直接使用公共储蓄的值和方法

{{ $store.state.msg }} // 输出 我是公共的数据，来拿我呀QAQ

如果需要在组件的方法中拿到值 则还需要通过this 当前的实例对象拿到值
比如 this.$store.state.msg

如何拿到store里面的方法呢？
一般在组件定义的方法里面拿到store里面的方法 统一交给store操纵公共数据比较
易维护
通过 this.$store.commit(‘store里的方法名’, 传参的可选值) // 只能传一个值，但是可以传对象数组之类的过去