学习vuex

Vuex概述

Vuex实现组件全局状态（数据）管理的一种机制，可以方便的实现组件间的数据共享。

组件间共享数据的方式

父向子传值：v-bind属性绑定

子向父传值：v-on事件绑定

兄弟组件间共享数据：EventBus

• $on 接受数据的那个组件
• $emit 发送数据的那个组件

vuex的优点

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护。
2. 能够高效的实现组件间的数据共享，提高开发效率。
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

vuex的使用

1. 安装

   cnpm i vuex --save

2. 导入vuex包

   import Vuex from 'vuex'
   Vue.use(Vuex);

3. 创建store对象

   const store = new Vuex.Store({
     // state 中存放的就是全局共享的数据
     state: { count: 0 }
   })

4. 将store对象挂载到vue实例中。

   new Vue({
     el: '#app',
     render: h => h(app),
     router,
     // 所有组件都可以从store中获取全局的数据了
     store
   })

另一种方式

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {},
    actions: {}
})

// main.js文件
import Vue from 'vue'
import App from './App.vue'
import store from './store'


Vue.config.productionTip = false

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

在组件中通过this.$store.state操作数据。

State

State提供唯一的公共资源，所有共享的数据都要统一放到Store的State中进行存储。

// 创建store数据源，提供唯一的公共数据
const store = new Vuex.Store({
	state: { count: 0 }
})

组件访问State中数据的第一种方式：

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

组建访问State中的数据的第二种方式：

// 1.从vuex中按需导入mapState函数
import { mapState } from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

// 2.将全局数据映射为当前组件的计算属性
computed: {
	...mapState(['count'])
}

Mutation

vuex不推荐直接在组件中通过$store修改state里面的值，推荐使用mutation变更Store中的数据。

通过这种方式虽然操作起来繁琐一些，但是可以集中监控所有数据的变化。

// 定义Mutation
const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		add(state,step){
			//变更状态
			state.count += step;
		}
	}
})

// 触发mutation
methods: {
	handle(){
        // commit的作用是触发mutation中的函数
		//触发mutation的第一种方式,携带数值3的参数
		this.$store.commit('add',3)
	}
}

触发mutations的第二种方式：

// 1.从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex';

通过刚才导入的mapMutations函数，将需要的mutations函数映射为当前组件的methods方法：

// 2.将指定的mutations函数映射为当前组件的methods函数
methods: {
	...mapMutations(['add','addN'])
}

注意：在mutations中不能使用异步函数，否则页面的数据变化了，vuex中的调试器中的数据没变。

Action

Action用于处理异步任务。

如果通过异步操作变更数据必须通过Action，而不能使用Mutation，但是在Action中还是需要通过触发Mutation的方式间接变更数据。

// 定义Action
const store = new Vuex.Store({
	mutations: {
		add(state){
			state.count++;
		}
	},
	actions: {
		addAsync(context){
			setTimeout(() => {
				context.commit('add')
			},10000);
		}
	}
})

// 通过dispatch触发actions的函数
methods: {
	handler(){
		this.$store.dispatch('addAsync')
	}
}

Getter

Getter用于对Store中的数据进行加工处理形成新的数据。

1. Getter可以对Store中已有的数据加工处理之后处理之后形成新的数据，类似Vue的计算属性。
2. Store中数据发生变化，Getter的数据也会跟着变化。

// 定义Getter
const store = new Vuex.Store({
	state: {
		count: 0
	},
	getters: {
		showNum: state => {
			return '当前最新的数量是【'  + state.count +'】'
		}
	}
})

使用getters的第一种方式：

this.$store.getters.名称

使用getters的第二种方式：

import { mapGetters } from 'vuex'
computed: {
	...mapGetters(['showNum'])
}

getter不会修改state中的数据，只进行包装作用。

vuex小项目

vue create vuex-todo
cnpm i vuex axios ant-design-vue -S