vuex基础知识篇

Vuex 是什么？

1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

2. 每一个 Vuex 应用的核心就是 store（仓库）。
   “store”基本上就是一个容器。
   它包含着你的应用中大部分的状态 (state)。
   Mutations 存放的是改变state的方法
   Actions 存放的是一些业务逻辑，通常为异步任务

3. Vuex 和单纯的全局对象有以下两点不同：
   (1) Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

(2) 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

安装

1. NPM

npm install vuex --save

2. Yarn

yarn add vuex

使用

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

Store

1. 安装 Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  // vuex 中改变状态的方法
    mutations: {
        fn2(state){ state.count++; }
    }
})

2. 使用

<template>
    <div @click="fn">{{count}}</div>
</template>
<script>
export default {
    data () { return { } },
    computed: {
        count(){ 
            // 把vuex中的状态赋给count
            return this.$store.state.count
        }
    },
    methods: {	
        fn(){ 		    
            // 调用vuex中改变状态的方法 
            // 用commit调用vuex中mutations中的方法
            this.$store.commit('fn2');		
        }	
    }
}
</script>

State单一状态树

每个应用只能包含一个 store 实例

在 vue 组件中获得 vuex 状态？
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

computed: {
	count(){
		// 把vuex中的状态赋给count
		return this.$store.state.count	
	}
}

mapState 辅助函数，快速接收 Vuex 中的 State。

import { mapState } from 'vuex'
export default {
	data () {	return { localCount:2 } },
	computed: mapState({	
		count (state) {			
			return state.count + this.localCount
		}
	}),
	methods: {	
		fn(){ this.$store.commit('fn2'); }
	}
}

Getter

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

1. Vuex

state: { count: 0 },
getters: {  //可以认为是 store 的计算属性	
    double(state){ return state.count*2;}
},
mutations: {
    fn2(state){ state.count++; }
}

2. 组件

export default {
    computed: {
        count(){
            //return this.$store.state.count;
            return this.$store.getters.double;
        }
    },
    methods: {
        fn(){
            this.$store.commit('fn2');
        }
    }
}

<div @click="fn">{{count}}</div>

mapGetters 辅助函数，作用是简化代码的书写。

export default {
	computed: {
		...mapGetters(["double"])
	},
	methods: {	
		fn(){ 
			this.$store.commit('fn2');
		}
	}
}

Mutation

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

1. Vuex

const store = new Vuex.Store({
    state: { count: 1 },	
    mutations: {
        // 定义事件，这个事件的作用是更新count的状态
        fn2(state){ state.count++; }
    }
})

2. 组件

export default {
    computed: {
        msg(){ return this.$store.state.count; }
    },
    methods: {
        fn(){
            // 调用 vuex 中的事件
            this.$store.commit('fn2');
        }
    }
}

<div @click="fn">{{msg}}</div>

3. 提交载荷(Payload)：就是执行 store.commit 时，传入额外的参数。

mapMutations 辅助函数

1. Vuex

const store = new Vuex.Store({
    state: { count: 1 },
    mutations: {
        fn2(state, payload){	
            state.count *= payload.n;
        }
    }
})

2. 组件

export default {
    computed: {
        msg(){
            return this.$store.state.count;
        }
    },
    methods: {
        ...mapMutations({
            fn: 'fn2'
        })
    }
}
<div @click="fn({n:2})">{{msg}}</div>

Action 提交的是 mutation，而不是直接变更状态。

1. Vuex

const store = new Vuex.Store({
    state: {count: 1},
    mutations: {
        fn2(state, payload){state.count *= payload.n;}
    },
    actions: {	
        fn3(context, payload){context.commit('fn2', payload)}
    }
})

2. 组件

export default {
    computed: {
        msg(){return this.$store.state.count;}
    },
    methods: {	
        fn(){this.$store.dispatch('fn3', {n:3})}
    }
}

<div @click="fn">{{msg}}</div>

1. Vuex 梳理

2. Vuex 详细

Vuex 的更多相关知识点,见官网 https://vuex.vuejs.org/zh/guide/.