vuex快速入门

February 08, 2017

Vue

总计 801 字

基本用途：

将某些data变成组件间公用的状态，组件随时都可以进行访问和响应，解决了props传值的链式响应的代码冗余
给状态配以公用方法，将状态的变更及时响应并处理

基本用法：

/store/store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        sideBarOpened: false
        //放置公用状态
    },
    getters: {
    	changeState: state => {
    		//相当于vue实例中的methods,用于处理公用data
    		//自vuex 面向组件的数据处理
    	}
    },
    mutations: {
    	//写法与getters相类似
    	//组件想要对于vuex 中的数据进行的处理
    	//组件中采用this.$store.commit('方法名') 的方式调用，实现充分解耦
    	//内部操作必须在此刻完成(同步)
    },
    actions: {
    	//使得mutations能够实现异步调用，实现例如延迟调用
    	increment ({ commit }, payload) {
    		commit('突变方法名')
    		//payload应该是一个对象，可通过模板方法调用传入对象的方式将数据从组件传入vuex
  		},
  		asyncIncrement({commit}) => {
  			setTimeout(() => {
  				commit('increment')
  			}, 1000)
  		}
    },
    modules: {
    	//引入某一个state的以上集合的模块，会自动分别填充到上面，使得结构更加清晰
    }
});

main.js

import { store } from './store/store'
*
*
new Vue({
  el: '#app',
  store,	//注入根组件
  ...
})

访问vuex中的数据和方法

this.$store.state.数据名
this.$store.getters.方法名

受影响组件局部定义计算属性响应变化数据

computed: {
     open () {
          return this.$store.state.sideBarOpened
     }
}

将 store 中的 getters/mutations 映射到局部(计算属性/方法)使用mapGetters/mapMutations辅助函数

import { mapGetters } from 'vuex'

computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
    	//映射 this.doneTodosCount 为 store.getters.doneTodosCount
      'doneTodosCount',
      //'getter名称',
      
      // 映射 this.doneCount 为 store.getters.doneTodosCount
  		doneCount: 'doneTodosCount'
      // 三个点表示将内部拿出生成键值对，这样使得组件本身的计算属性不受影响
      // 此语法依赖babel-preset-stage-2
    ])
  }

注意事项：

mutation 必须是同步函数 — devtool要保存快照，方便追踪状态变化

使用 v-model 绑定 vuex 计算属性的时候要设置get 和 set 才能双向绑定

computed: {
	value: {
		get () {
			return this.$store.getters.value;
		},
		set (event) {
			this.$store.dispatch('updateValue', event.target.value);
		}
	}
}