Vuex的基本使用

概念

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

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

①能够在vuex中集中管理共享的数据，易于开发和后期维护。

②能够高效地实现组件之间的数据共享，提高

③存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

vuex的基本使用

npm install vuex --save  // 安装vuex依赖包①

import Vuex from "vuex"    // 导入vuex包②

Vue.use(Vuex)       

const store = new Vuex.store({ // 创建store对象

	// state中存放的就是全局共享的数据	

	state:{count:0}

})

操作如下：

1、vue ui // 可视化图形界面，方便创建、更新和管理vue项目 相当于： vue create 项目名

2、任务-》运行-》启动app // 相当于： npm run serve

vuex五个核心

1、state

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

组件访问state中数据

方法1：this.$store.state.状态名称

方法2：从vuex中按需引入mapState函数，将指定的state中的状态，在computed中映射为当前组件的值。

步骤一：import {mapState} from 'vuex';   // 从vuex中按需导入mapState函数

步骤二：computed：{

					...mapState(['状态名称'])

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

2、mutations

Mutation用于变更Store中的数据

①只能通过mutation变更Store数据，不可以直接操作Store中的数据。

②通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

使用mutations：

方法一：this.$store.commit(‘mutation函数’);

mutations中定义函数，当前组件中通过commit调用函数

可以在触发mutations时传递参数

方法二：从vuex中按需引入mapMutations函数，将指定的mutations函数，在methods中映射为当前组件的methods方法。

注：不要mutations中写异步代码，因为vue调试器不会更新状态

3、actions

Action 用于处理异步任务。

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

使用actions：

方法一：this.$store.dispatch(‘action函数’);

actions中定义异步函数，传入参数，通过 参数.commit(‘mutation函数’) 触发一个mutation，当前组件的方法中通过dispath调用action中的异步函数

可以在触发actions时传递参数

方法二：从vuex中按需引入mapActions函数，将指定的actions函数，在methods中映射为当前组件的methods方法。

4、getters

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

①Getter可以对Store中已有的数据加工处理之后形成新的数据，不会改变原有的数据，类似Vue中的计算属性。

②Store中数据发生变化，Getter的数据也会跟着变化。

使用getters：

方法一：this.$store.getters.状态名称

方法二：从vuex中按需引入mapGetters函数，将指定的getter，在computed中映射为当前组件的值。

5、modules

modules可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理；如果所有的状态或者方法都写在一个store里面，将会变得非常臃肿，难以维护。

示例

vuex_demo1\src\store\index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    // 对count进行加工形成showNum，相当于计算属性
    showNum:(state)=>{
      return '当前值'+state.count
    }
  },
  // 只有mutations中的函数才有权力修改state中的数据
  mutations: {
    // mutation第一个参数是state
    add(state){
      // 变更状态
      state.count++;
    },
    addN(state,step){
      state.count+=step;
    },
    subtraction(state){
      // 变更状态
      state.count--;
    },
    subtractionN(state,step){
      state.count-=step;
    }
  },
  actions: {
    // 执行异步操作
    // 在actions中，不能直接修改state中的数据，
    // 必须通过context.commit() 触发某个mutation才行
    addAsync(context){
      setTimeout(()=>{
        context.commit('add');
      },1000)
    },
    addNAsync(context,step){
      setTimeout(()=>{
        context.commit('addN',step);
      },1000)
    },
    subtractionAsync(context){
      setTimeout(()=>{
        context.commit('subtraction');
      },1000)
    },
    subtractionNAsync(context,step){
      setTimeout(()=>{
        context.commit('subtractionN',step);
      },1000)
    }
  },
  modules: {
  }
})

组件Addition：vuex_demo1\src\components\Addition.vue

<template>
    <div>
        <!-- <h3>当前最新的count：{{ $store.state.count }}</h3> -->
        <h3>{{ $store.getters.showNum }}</h3>
        <button @click="addHandler">+1</button>
        <button @click="addHandler2">+3</button>
        <button @click="addAsyncHandler3">+1 Async</button>
        <button @click="addAsyncHandler4">+N Async</button>
    </div>
</template>
<script>
export default {
    data(){
      return  {}
    },
    methods:{
        addHandler(){
            // 触发mutations的 方法一
            this.$store.commit('add')
        },
        addHandler2(){
            // 触发mutations的 方法一,传递参数
            this.$store.commit('addN',3)
        },
        addAsyncHandler3(){
            // 这里的dispatch函数，专门用来触发action 方法一
            this.$store.dispatch('addAsync')
        },
        addAsyncHandler4(){
            // 这里的dispatch函数，专门用来触发action,方法一 传递参数
            this.$store.dispatch('addNAsync',5)
        }
    }

}
</script>

组件Subtraction：vuex_demo1\src\components\Subtraction.vue

<template>
    <div>
        <!-- <h3>当前最新的count：{{ count }}</h3> -->
        <h3>{{ showNum }}</h3>
        <button @click="handleSub">-1</button>
        <button @click="handleSubN">-3</button>
        <button @click="subtractionAsync">-1 Async</button>
        <button @click="subtractionNAsync(5)">-N Async</button>
    </div>
</template>
<script>
import { mapState,mapMutations,mapActions, mapGetters } from 'vuex'

export default {
    data(){
       return {}
    },
    computed: {
        // 将指定的state中的状态，在computed中映射为当前组件的值
        ...mapState(['count']),
        // 将指定的getter，在computed中映射为当前组件的值
        ...mapGetters(['showNum'])
    },
    methods:{
        // 将指定的mutations函数，映射为当前组件的methods函数
        ...mapMutations(['subtraction','subtractionN']),
        // 将指定的actions函数，映射为当前组件的methods方法
        ...mapActions(['subtractionAsync','subtractionNAsync']),
        handleSub(){
            this.subtraction();
        },
        handleSubN(){
            this.subtractionN(3);
        }
    }
}
</script>