Vuex全篇

Vuex概述

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

这些只适合小范围的数据共享，如果想要大范围的数据共享，就推荐使用vuex

父向子传值：v-bind属性绑定

子向父传值：v-on 事件绑定

兄弟组件之间：EventBus

1.2 Vuex是什么

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

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

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

vuex的基本使用

1. 安装vuex依赖包

npm install vuex --save
1

2. 导入vuex包

1. 创建store.js文件

2. 在store.js中 导入vue、vuex

3. import Vue from "vue"
   import Vuex from "vuex";
   Vue.use(Vuex);
   1
   2
   3

3. 创建并导出store对象

const store = new Vuex.Store({
    // state中存放的就是全局共享的数据
    state:{
        count:0,
    }
});
export default store;
1
2
3
4
5
6
7

4. 将store对象挂在到vue实例中

在main.js中导入store.js文件，并且使用这个仓库

new Vue({
    el:"#app",
    render:h=>h(app),
    router,
    // 将创建的共享数据对象，挂在到Vue实例中
    // 所有的组件，就可以直接从store中获取全局的数据了
    store
})
1
2
3
4
5
6
7
8

Vuex的核心概念

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

1. 组件访问State中数据的第一种方式

直接使用this.$store.state.全局数据的名称；  <template里面this可以省略>
1

2. 组件中访问state中数据的第二种方式

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

import { mapState } from “vuex";  <哪个组件需要，就在哪个组件中导入>
1

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

computed:{
 ...mapState(['count'])
}
1
2
3

两种方式 看自己需求使用

Mutation

1. 在vue中，不允许组件修改store里面的数据，而是推荐使用Mutation修改store里面的数据

2. 通过这种方式虽然操作起来比较繁琐，但是可以集中监控所有数据的变化

// 在store中定义mutations
const store = new Vuex.Store({
    state:{
        count:0;
    },
    mutations:{
     // state指向上面的对象
        add(state){ 
            //更变状态
            state.count++;
        }
    }
})


// 在组件中触发mutation
methods:{
    handle(){
    	// commit的作用就是调用某个mutation函数
        this.$store.commit('add')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在触发mutations时可以接收参数

// 在store中定义mutations
const store = new Vuex.Store({
    state:{
        count:0;
    },
    mutations:{
     // 第一个参数state指向上面的对象
     // 第二个参数就表示外界要传过来的值
        add(state,step){ 
            state.count+= step;
        }
    }
})


// 在组件中触发mutation
methods:{
    handle(){
        this.$store.commit('add')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注：在mutations中不能写异步的代码，异步代码应放到action中

Action

1、 Action用于处理异步任务。

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

// 定义Action
const store = new Vuex.Store({
    ....
    mutations:{
    	add(state){
    		state.count++;
		}
	},
    actions:{
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000)
        }
    }
});

// 在组件中触发Action
methods:{
    handle(){
        // dispath的作用就是触发actions中的某个函数
        this.$store.dispatch('addAsync')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24