Vuex笔记

1. Vuex概述

1.1 组件之间共享数据的方式

• 父向子传值：v-bind属性绑定
• 子向父传值：v-on事件绑定
• 兄弟组件之间共享数据：EventBus（$on接收方，$emit发送方）

1.2 Vuex是什么

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

1.3 使用Vuex统一管理状态的好处

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

1.4 什么样的数据适合存储在Vuex中

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。

2. Vuex的基本使用

1. 安装vuex依赖包

npm install vuex@next --save

2. 导入vuex包

main.js文件同级创建store.js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
    State:{

    },
    mutations:{

    },
    actions:{
        
    }
})

3. 创建store对象
4. 将store对象挂载到vue实例中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

3. Vuex中的核心概念

3.1 核心概念概述

• State
• Mutation
• Action
• Getter

3.2 State

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

组件访问State中数据的第一种方式：this.$store.state.全局数据名称

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

1. 从vuex中按需导入mapState函数

import { mapState } from 'vuex'

2. 将全局数据，映射为当前组件的计算属性

computed: {
	...mapState(['全局数据名称1','全局数据名称2',...])
}

3.3 Mutation

Mutation用于变更Store中的数据

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据
• 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化
• mutation中不能处理异步操作

触发mutation的第一种方式：

 export default new Vuex.Store({
    State: {
        count: 0
    },
    //定义mutation
    mutations: {
        add(state) {
            state.count++
        },
        //第一个参数永远是state
        addN(state, step) {
        	state.count += step
        },
    },
    actions: {

    }
})

//触发mutation
methods: {
	handle1(){
		//触发mutation的第一种方式
		this.$store.commit('add')
	},
	handle2(){
		//触发mutation时携带参数
		this.$store.commit('addN', 2)
	},
}

触发mutation的第二种方式：

1. 从vuex中按需导入mapMutations函数

import { mapMutations} from 'vuex'

2. 将指定的mapMutations函数，映射为当前组件的methods函数

methods: {
	...mapMutations(['函数1','函数2',...])
}

3.4 Action

Action用于处理异步任务。

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

触发action的第一种方式：

//定义action
export default new Vuex.Store({
    State: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++
        },
        addN(state, step) {
        	state.count += step
        },
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        },
        addNAsync(context,step) {
            setTimeout(() => {
                context.commit('addN',step)
            }, 1000)
        },
    }
})

//触发action
methods: {
	//触发action的第一种方式
	handle1(){
		this.$store.dispatch('addAsync')
	},
	handle2(){
		//触发action的第一种方式
		this.$store.dispatch('addNAsync',2)
	},
}

触发action的第二种方式：

1. 从vuex中按需导入mapActions函数

import { mapActions} from 'vuex'

3. 将指定的mapActions函数，映射为当前组件的methods函数

methods: {
	...mapActions(['函数1','函数2',...])
}

3.5 Getter

Getter用于对Store中的数据进行加工处理形成新的数据（类似于计算属性），Store中数据发生变化，Getter中的数据也会变化

//定义getter
export default new Vuex.Store({
    State: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++
        }
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        }
    },
    getters:{
        showNum(state) {
            return '当前数值是：' + state.count
        }
    }
})

使用getters的第一种方式：this.$store.getters.名称
使用getters的第二种方式：

1. 从vuex中按需导入mapGetters函数

import { mapGetters} from 'vuex'

2. 将指定的mapGetters函数，映射为当前组件的computed属性

computed: {
	...mapGetters(['属性1','属性2',...])
}

4. 模块化使用

1. 目录结构
   
2. 模块文件里的内容
   namespaced: true

export default {
  namespaced: true,
  state: {
        ...
    },
    getters: {
        ...
    },
    mutations: {
    	...
    },
    actions: {
        ...
    }
}

3. index.js

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

import One from './modules/One'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {},
    modules: {
      one: One
    }
})

4. 使用
   导入map的方式不变

import { mapState, mapGetters } from 'vuex'

computed: {
	...mapState('one', [...]),
	...mapGetters('one', [...])
},

this.$store.dispatch('one/getList')
this.$store.commit('one/setInputValue', e.target.value)