关于vuex

Vuex

1. 在vue的项目中，要处理各种各样的数据，这些数据虽然多，但是，从本质上来划分，分为两种数据：

• 组件内部私有的数据(组件之间不会共享私有的数据)
• 组件之间共享的数据(父组件要共享给子组件的数据、子组件要共享给父组件的数据、兄弟组件之间的传值)
  • 父向子： v-bind 属性绑定
  • 子向父：v-on 事件绑定机制
  • 兄弟组件之间共享的数据：EventBus
    • $on 接收数据的那个组件
    • $emit 共享数据的那个组件

2. 当组件之间要共享数据的时候最好使用一个全局的数据存储对象来进行控制

什么是Vuex

简单点说 就是为了实现组件之间数据共享的一种机制

为什么要有Vuex

• 因为使用父子传值或兄弟传值太麻烦；不好管理，项目代码写起来太麻烦
• 当有了vuex，想要共享数据，只需要把数据挂载到vuex就行，想要获取数据，直接从vuex上拿到就行
• 当vuex中的数据修改之后，其它引用了此数据的组件，也会同步更新
• 注意：只有组件间共享的数据，才有必要存储到vuex中，组件自己私有的数据，还是要存储到自己的data中

如何在项目中使用Vuex

1. 运行npm install vuex -S
2. 导入 vuex

   	import Vuex from 'vuex'
   

3. 安装Vuex

   	Vue.use(Vuex)
   

4. 创建store公共状态对象

   	const store = new Vuex.Store({
   		state: {
   			// state中存放的，就是全局共享的数据，可以把state认为是组件中的data
   			count: 0
   		}
   	})
   

5. 将创建的store挂载到vm实例上

   	new Vue({
   		el: '#app',
   		render: c => c(app),
   		router,
   		store // 将创建的共享状态对象，挂载到 Vue 实例中，这样，所有的组件，就可以直接从 store 中获取捐局的数据了
   	})
   

6. 如果想要在组件中访问全局的数据

   	this.$store.state.全局数据名称
   

在组件中访问store中state上的属性

第一种方式

this.$store.state.数据的名称

第二种方式

• 按需导入 mapState 辅助函数

  	import { mapState } from 'vuex'
  

• 创建一个computed属性， 通过mapState,结合...展开运算符，把需要的状态映射到组件的计算属性中

  	computed: {
  		// 自定义的计算属性
  		newMsg: function() {
  			return '---' + this.msg + '---'
  		},
  		// 通过 展开运算符，把state中的数据映射为计算属性，这样，能够让自己的计算属性和state中的属性并存
  		...mapState(['count'])
  	}
  

修改store中的state上的值

第一种方式

使用this.$store.commit('方法名')来调用 mutations 中的方法

第二种方式

• 使用mapMutaions来映射方法到methods中

  	import { mapMutations } from 'vuex'
  

• 映射 mutations 方法到 methods中

  	methods: {
  		...mapMutations(['add'])
  	}
  

定义和使用getters

使用方式1

通过this.$store.getters.名称来访问

使用方式2

使用mapGetters来映射为计算属性

	import { mapState, mapGetters } from 'vuex'
	computed: {
		...mapState(['count']),
		...mapGetters(['countinfo'])
	}

定义和使用 actions 来提交异步的操作

使用方式1

通过this.$store.dispatch('Action方法名称', 参数)来访问，专门调用action中的方法

使用方法2

使用mapGetters来映射为计算属性

	import { mapActions } from 'vuex'
	methods: {
		...mapActions(['asyncSubtract'])
	}