vuex 学习总结

算是学习记录VUE以及项目中使用的地方

vue 的全家桶已经不再是难的技术，视乎成为前端开发人员必备的技能之一了，公司项目很早就从jQuery 转换成VUE React等，记录学习也是自我的进步。

---

---

安装、

提示：这里可以添加本文要记录的大概内容：

npm install vuex --save

通过 Vue.use() 来安装 Vuex

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

Vue.use(Vuex)

一、state

1、vuex 中的状态是响应式的，如果state 发生变化相应的组件中的状态也会发生变化。
2、vuex 中的状态是不能直接修改的，唯一途径就是显式地提交 (commit) mutation 这样容易跟踪代码。

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）

项目中使用–从根组件注入

import Vue from 'vue'
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
	store,
})

在 store.vue 安装vuex

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

Vue.use(Vuex)
const store = new Vuex.Store({})
export default store

mapState 辅助函数

import {mapState} from 'vuex'

computed:{
     ...mapState({
         hasLogin:state=>state.hasLogin,
         userInfo:state=>JSON.parse(state.userInfo)
     }),
 },

二、Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

mapGetters 辅助函数

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

三、 Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

	mutations: {
		login(state, userInfo) {
			state.userInfo = userInfo || {};
			state.hasLogin = true;
		},
	}

	loginFun(context,userInfo){
		context.commit("login",userInfo)
	},

** Mutation 必须是同步函数**

一条重要的原则就是要记住 mutation 必须是同步函数

在组件中提交 Mutation

...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })

四、 Action

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作

	actions:{
		loginFun(context,userInfo){
			context.commit("login",userInfo)
		},
	}

** 分发Action**

onUnload:function(){
	this.$store.dispatch("logoutFun");
}

五、 Module（暂时没有去使用）

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割