目录

1.什么是vueX 官网介绍： State | Vuex (vuejs.org)

2.vueX包括哪些模块

(1) State存放共享数据(count)

(2) mutation更改State中数据。

(3) Action中执行异步函数。

(4)  Getter 用于对Store 中的数据进行加工处理形成新的数据。

1.什么是vueX 官网介绍： State | Vuex (vuejs.org)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。ps:简单来说就是为了解决多组件共享数据问题。

2.vueX包括哪些模块

vueX包括5个模块 State Getter Action  mutation Module.

State是用来存放组件之间需要共享的数据。

Getter 用于对state 中的数据进行加工处理形成新的数据。

Action用于处理异步函数。

mutation用于更改State中的数据状态。

Module用于将store分成多个模块。

(1) State存放共享数据(count)

页面页面中有两种使用方法，第一中是直接使用插值语法{{ $store.state.count }}渲染，另一种是使用mapState函数将全局数据count，映射为当前组件的计算属性。

<template>
    <div>
        //第一种
        <h2>当前的值为：{{  $store.state.count }}</h2>
        //第二种 
        <h2>当前的值为：{{ count }}</h2>
    </div>
</template>

<script>
// 按需引入mapState函数
import { mapState } from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    // 通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
    computed:{
        ...mapState(['count'])
    },
}
</script>




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

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {},
  // 处理异步函数
  actions: {},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

(2) mutation更改State中数据。

mutation两种方法更改State中数据，一种是直接调用，另一种是按需引入将mutation中的函数通过mapMutation函数映射到组件methods中直接调用。

第一种是this.$store.commit('store中muatation定义的函数名'，参数)

<template>
    <div>
        <h2>当前的值为：{{ $store.state.count }}</h2>
        <button @click="addBtn">数量+1</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods:{
        // mutation用于变更store中的数据
        // 只能通过mutation变更Store数据，修改store.state中的值不能直接使用                  this.$store.state.count ++ 
        // 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
        addBtn(){
            // this.$store.commit(定义的函数名，传递值)
            this.$store.commit('addN',2)
        }
    }
}
</script>


在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {
    //num是传递过来的参数
       addN(state, num) {
       state.count += num
   },
},
  // 处理异步函数
  actions: {},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

第二种使用mapMutation将mutation中的函数映射为组件中methods中的一个方法。

<template>
    <div>
        <h2>当前的值为：{{ count }}</h2>
        <button @click="subBtn">数量-1</button>
    </div>
</template>

<script>
// 按需引入mapMutations函数
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    methods:{
        //按需引入 mapMutations函数 将需要的mutations函数，映射为当前组件的 methods方法:
        ...mapMutations(['sub']),
        subBtn(){
            //直接传参数不需要再声明函数名
            this.sub(3)
        }
    }
}
</script>


在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {
    //num是传递过来的参数
     sub(state,num) {
          state.count -= num
    }
},
  // 处理异步函数
  actions: {},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

(3) Action中执行异步函数。

不要再mutation中执行异步代码，因为会导致页面更新这个改变的值，而state中的值没有改变。所以Action专门用于处理异步函数，但是Action并不是直接执行异步函数，而是要通过dispath方法区调用mutation中的方法从而达到异步更改state中的数据。

例如：

在Action中执行异步函数也有两种方式，一种是直接调用，另一种是和mapMutation差不多的mapAction函数映射。

第一种直接调用：

<template>
    <div>
        <h2>当前的值为：{{ $store.state.count }}</h2>
        <button @click="addBtnAsync">异步数量+1</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods:{
        // 异步+1
        addBtnAsync(){
            // this.$store.commit(定义的函数名，传递值)
               this.$store.dispatch('addAsync',5)
        }
    }
}
</script>


在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {
    //num是传递过来的参数
       add(state, num) {
       state.count += num
   },
},
  // 处理异步函数
  actions: {
        //num是传递过来的参数
    addAsync(context,num) {
      setTimeout(() => {
        context.commit('add',num)
      }, 1000)
    },

},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

 第二种使用mapAction函数映射

<template>
    <div>
        <h2>当前的值为：{{ count }}</h2>
        <button @click="subBtn">数量-1</button>
    </div>
</template>

<script>
// 按需引入mapActions 函数
import { mapActions } from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    methods:{
        //按需引入 mapActions函数 将需要的mapActions函数，映射为当前组件的 methods方法:
        ...mapActions(['subAsyncN']),
        subBtn(){
            //直接传参数不需要再声明函数名
            this.subAsyncN(3)
        }
    }
}
</script>


在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {
    //num是传递过来的参数
     subN(state,num) {
          state.count -= num
    }
},
  // 处理异步函数
  actions: {
    subAsyncN(context,num) {
      setTimeout(() => {
        context.commit('subN',num)
      }, 1000);
    }

},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

(4)  Getter 用于对Store 中的数据进行加工处理形成新的数据。

<template>
    <div>
        <h2>当前的值为：{{ showNum}}</h2>
    </div>
</template>

<script>
// 按需引入 mapGetters 函数
import { mapGetters} from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    // 通过刚才导入的mapGetters函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
    computed:{
        ...mapGetters(['showNum'])
    },
}
</script>




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

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {},
  // 处理异步函数
  actions: {},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {
    showNum(state) {
      return 'getters当前最新的值为' + state.count
    }
  },
  modules: {}
})

ps总结：State用于存放数据，Action用于执行异步函数，mutation用于修改state中的数据，Getter加工数处理成新的数据，但是也会随着state中数据的变化二变化 。