VUEX核心内容及用法

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

1. 基本使用

(1）下载vuex依赖包

npm install vuex --save

(2）导入vuex包

import Vuex from ‘vuex’
Vue.use(Vuex)

(3）创建store对象

const store = new Vuex.Store(
state:{
// state中存放的是全局共享的数据
})

(4）将store对象挂载到vue实例中

new Vue({
el:’#app’,
render:h=>h(app),
router,
store
})

2.核心内容

1.State:

内容：State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。
实现方法：
1.使用 {{$store.state.xx}}获取xx属性
2.使用 ...mapState([xx])获取xx属性

2.Mutations：

内容：Mutation用于变更Store中的数据。
① 只能通过mutations变更Store中的数据，不可以直接操作Store中的数据。
实现方法：
1.使用this.$store.commit(‘方法名’)/this.$store.commit(‘方法名，参数’)进行调用
2.使用 ...mapMutations(['方法名', '方法名'])进行调用

3.Actions:

内容：触发actions异步任务时携带参数
实现方法：
1.使用this.$store.dispatch('方法名')/this.$store.dispatch('方法名'，参数)进行调用
2.使用：...mapActions(['方法名', '方法名'])进行调用

4.Getter:

内容：对state中的数据进行包装
实现方法：
1.使用{{$store.getters.showNum}}进行调用
2.使用 ...mapGetters(['方法名'])进行调用

注意：

在使用第一种方法的时候不需要在组件内导入什么，State和Getter直接取值，Mutations和Actions的方法可在组件的methods中调用或者直接与@click="方法名"调用。

在使用第二种方法的适合需要在组件内

import {mapGetters, mapMutations, mapState, mapActions} from 'vuex'

State和Getter的取值在组件中与methods同级创建computed调用第二种方法，Mutations和Actions的方法可在组件的methods中调用或者直接与@click="方法名"调用。

3.代码块

①store.js：

②main.js：

③state使用方法：

定义：

调用：
方法一：

方法二：

④Mutations使用方法：

定义：

调用：
方法一：

方法二：

③Actions使用方法：

定义：

调用：
方法一：

方法二：

③Getter使用方法：

定义：

调用：
方法一：

方法二：

(Ending)