# 3.1核心概念概述 Vuex中的主要核心概念如下: ~~~ ● State ● Mutation ● Action ● Getter ~~~ ## 3.2 State （数据） State提供唯一的公共数据源， 所有共享的数据都要统-放到Store的State中进行存储。 ~~~ 1、（在state.js 公共文件书写） //创建store数据源，提供唯一公共数据 const store = new Vuex.Store ({ state: { count: 0 } }) ~~~ 组件访问State中数据的**第一种方式**: ~~~ 2、 那个文件需要 那个文件写 // 直接在引用的html 页面里 书写 $store.state. + 上面 state 里的 count 即可 this.$store.state.全局数据名称 ~~~ ## 3.2 State （在使用的vue 文件书写） 组件访问State中数据的**第二种方式**: ~~~ // 1.从vuex中按需导入mapState 函数 import { mapState } from 'vuex' ~~~ 通过刚才导入的mapState函数,将当前组件需要的全局数据，映射为当前组件的computed计算属性: ~~~ // 2.将全局数据，映射为当前组件的计算属性 computed: { ...mapState(['count']) } ~~~ ## 3.3 Mutation （store.js 文件 函数） Mutation用于**变更Store中的数据**。 ① 只能通过mutation变更Store数据,不可以直接操作Store中的数据。 ② 通过这种方式虽然操作起来稍微繁琐-些， 但是可以集中监控所有数据的变化。 1、在store.js 定义 ~~~ //定义Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { add(state) { //变更状态 state.count++ } } }) ~~~ 2、使用 （使用的vue 文件 书写 及使用 this.$store.commit('add' ) ） ~~~ //触发mutation methods: { handle1() { // 触发mutations的第一种方式 this.$store.commit('add' ) } } ~~~ ### Mutation 传参 可以在触发mutations时传递参数: ~~~ // 定义Mutation const store = new Vuex.store( { state: { count: 0 }, mutations: { addN(state, step) { //变更状态 state.count += step } } }) ~~~ 触发mutation ~~~ //触发mutation methods: { handle2() { // 在调用commit 函数， // 触发mutations 时携带参数 this.$store.commit('addN',3) } } ~~~ ## Mutation 第二种使用方式 this.$store.commit()是触发mutations的第-种方式， 触发**mutations的第二种方式**: ~~~ // 1.从vuex 中按需导入mapMutations 函数 import { mapMutations } from 'vuex' ~~~ 通过刚才导入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法: ~~~ // 2.将指定的 mutations函数，映射为当前组件的methods 函数 methods: { ...mapMutations(['add', 'addN']) } ~~~ ## 3\. 4 Action （执行异步函数） Action用于处理异步任务。 如果通过异步操作变更数据，必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。 1、在store.js 里面定义 ~~~ //定义Action const store = new Vuex.Store ( { //...省略其他代码 mutations: { add(state) { state.count++ } }, actions: { addAsync(context) { setTimeout(() => { context.commit('add' ) }, 1000) } } }) ~~~ 2、使用 ~~~ //触发Action methods: { handle () { // 触发actions的第一种方式 this.Sstore.dispatch( 'addAsync' ) } } ~~~ ### action 异步函数 传参  ### action 第二种 this.$store.dispatch()是触发actions的第一种方式, 触发actions的第二种方式: ~~~ // 1.从vuex中按需导入mapActions函数 import { mapActions } from 'vuex' ~~~ 通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法: ~~~ // 2.将指定的 actions 函数，映射为当前组件的methods 函数 methods: { ...mapActions([ 'addASync', 'addNASync']) } ~~~ ## 3.5 Getter 将数据和其他文件包装输出 Getter于对Store中的数据进行加工处理形成新的数据。 ①Getter 可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。 ②Store 中数据发生变化，Getter 的数据也会跟着变化。 ~~~ //定义Getter const store = new Vuex.store({ state: { count : 0 }, getters: { showNum: state => { return '当前最新的数量是[ '+ state.count +' ] ' } } }) ~~~ * * * 使用 getters 的第一种方式: ~~~ this.Sstore.getters.名称 ~~~ 使用 getters 的第二种方式: ~~~ import { mapGetters } from 'vuex' computed: { ...mapGetters([ 'showNum'] ) } ~~~ html 使用 {{ showNum}}