了解 vuex

vuex

Vuex 会把自身挂载到所有组件上，无论你是否需要，这增加了性能的消耗，不是所有自组件都要用到同一个状态，除非是路由这样的特殊状态。Vuex的核心概念包含State,Getter,Mutation,Action,Module，如果需求不是复杂，简单使用statue存储状态，mutation触发变更可以完成大部分项目需求

• 安装vuex
  cnpm i vuex --save
• 在main.js中引入vuex
  创建文件夹vuex，创建文件store.js
  引入 Vue，vuex，用vue.use接收

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

• 声明常量
  const state ={ count : 1 }
• 暴露变量
  export default new Vuex.Store( { state } )
• 其他页面引入
  import state from ‘@/vuex/store.js’
• $store.state.count 显示数值
  用 $store.commit( ‘add’ )来调用

关系：

• State（类似于vue中的data） ： Vuex的状态存储是响应式的，使用vue的computed属性获取动态store中的值

  	vue中：
  			computed: {              //计算属性获取响应式的数据
  			    count () {
  			      return this.$store.state.count
  			    }
  			  },
  	vuex中：
  		const state ={   count : 1 }	
  		export default new Vuex.Store( {  state  } )
  

  1.mapState 辅助函数：

  当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState辅助函数帮助我们生成计算属性，让你少按几次键：

  	// 在单独构建的版本中辅助函数为 Vuex.mapState
  	import { mapState } from 'vuex'
  	
  	export default {
  	  // ...
  	  computed: mapState({
  	    // 箭头函数可使代码更简练
  	    count: state => state.count,
  	
  	    // 传字符串参数 'count' 等同于 `state => state.count`
  	    countAlias: 'count',
  	
  	    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
  	    countPlusLocalState (state) {
  	      return state.count + this.localCount
  	    }
  	  })
  }
  

• Mutation（类似于vue中的method,vuex中的方法）：若想改变store中的状态，唯一方法就是提交（commit）mutation，可以方便跟踪每一个状态的变化

  //方法：要操作state中的值,不能直接通过this.$store.state.xxx = yyy的方式直接修改,必须要提交给mutation处理
  vue中：
  	$store.commit( 'increment' , 10 )
  vuex中
  	mutations: {
   	  increment (state, n) {
    		state.count += n
  	  }
      }
  //方法2：提交 mutation 的另一种方式是直接使用包含 type 属性的对象：
  vue:
  	store.commit({
  	  type: 'increment',
  	  amount: 10
  	})
  vuex:
  	mutations: {
  	  increment (state, payload) {
  	    state.count += payload.amount
  	  }
  	}
  

• Getter（ store 的计算属性）：对列表进行过滤并计数,就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

  vue：
  	computed: {
  		  doneTodosCount () {
  		    return this.$store.getters.doneTodosCount
  		  }
  		}
  vuex：
  	const store = new Vuex.Store({
  	  state: {
  	    todos: [
  	      { id: 1, text: '...', done: true },
  	      { id: 2, text: '...', done: false }
  	    ]
  	  },
  	  getters: {
  	    doneTodos: state => {
  	      return state.todos.filter(todo => todo.done)
  	    }
  	  }
  	})
  	//Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些
  	store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
  
  

• Action( mutation 必须同步执行这个限制,Action 就不受约束！我们可以在 action 内部执行异步操作):

  // Action 类似于 mutation，不同在于：
  	1.Action 提交的是 mutation，而不是直接变更状态。
  	2.Action 可以包含任意异步操作。
  		const store = new Vuex.Store({
  		  state: {
  		    count: 0
  		  },
  		  mutations: {
  		    increment (state) {
  		      state.count++
  		    }
  		  },
  		  actions: {
  		    increment (context) {
  		      context.commit('increment')
  		    }
  		  }
  		})
   简写: 
  	actions: {
  	  increment ({ commit }) {
  	    commit('increment')
  	  }
  	}
  	
  //Action 通过 store.dispatch 方法触发：
  	store.dispatch('increment')
  

• Module

  const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
  }
  
  const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
  }