一张图看懂会用Vuex

1、Vuex是什么？

Vuex说实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享，但是页面刷新数据会丢失，因为Vuex 存储的状态是保存在内存中的，而不是持久化存储。所以当页面刷新或重新加载时，浏览器会重新创建 Vue 实例和 Vuex store，从而导致之前保存在 Vuex 中的状态数据丢失。

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

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

3、什么样的数据适合存储到vuex中

一般情况下，只有组件之间共享的数据，才有必要存到vuex中，对于组件中的私有数据依旧存储在组件自身的data中即可

4、Vuex基本使用

4.1、安装依赖

npm install vuex --save

4.2、导入vuex包

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

4.3、创建store对象

const store = new Vuex.Store({
    //state中存放的就是全局共享数据
    state:{
        count: 0  //定义你需要存储的数据
    }
})

4.4、将store对象挂载到vue实例中

new Vue({
  el: '#app',
  router,
  //将创建的仓库挂载到Vue实例中
  //所有的组件就可以直接从store中获取全局的数据了
  store,
  i18n,
  render: h => h(App)
})

5、Vuex解析

5.1、state定义状态

首先，你需要在 Vuex 的 store 中定义状态。状态是存储数据的对象。state提供唯一的公共数据源，所有的共享数据都要统一放到store的state中进行存储。

const store = new Vuex.Store({
    //state定义状态
    state:{
        count: 0  
    }
})

5.1.1、组件访问state中的数据

方法1：直接使用

//格式：this.$store.state.全局数据名称
//例如：
this.$store.state.count

方法2：导入指定函数

//在当前组件导入mapState函数
import {mapState} from 'vuex'
//将全局数据映射为当前组件的computed计算属性
computed:{
    ...mapState(['count'])
}

5.2、mutations修改状态（同步操作）

Vuex 中的状态不能直接修改，需要通过 mutation 函数来进行修改。Mutation 函数是同步的，用于改变状态。

const store = new Vuex.Store({
    //state定义状态
    state:{
        count: 0  
    },
    
    //修改状态
    mutations:{
       //state: 表示数据状态
       //step: 表示外界传过来的参数（不强制，根据需求）
       add(state,step){
           //state.count++   无参数
           state.count+=step
       }
   }
})

5.2.1、组件修改仓库中的数据（同步）

方法1：直接触发mutations中的函数

handlel(){
    //commit: 用于触发mutations中的函数
    this.$store.commit('add',3)
}

方法2：导入指定函数

//在当前组件导入mapMutations函数
import {mapMutations} from 'vuex'
//将指定mutations中的函数映射为当前组件的methods函数
methods:{
    ...mapMutations(['add']),
    handlel(){
    this.add(3)
     }
}

5.3、actions 修改状态（异步操作）

如果你需要进行异步操作（例如从 API 获取数据），你应该在 actions 中进行，并通过 actions 提交 mutation。

const store = new Vuex.Store({
    //state定义状态
    state:{
        count: 0  
    },
    
    //修改状态（同步）
    mutations:{
       //state: 表示数据状态
       //step: 表示外界传过来的参数（不强制，根据需求）
       add(state,step){
           //state.count++   无参数
           state.count+=step
       }
   }

    //修改状态（异步）
    actions:{
       //stacontext.commit: 表示触发mutations中的函数
       //step: 表示外界传过来的参数（不强制，根据需求）
       addAsync(context,step){
           setTimeout(()=>{
              context.commit('add',step)
          })
       }
   }
})

5.2.1、组件修改仓库中的数据（异步）

方法1：直接触发actions 中的函数

handlel(){
    //dispatch: 用于触发actions中的函数
    this.$store.dispatch('addAsync',3)
}

方法2：导入指定函数

//在当前组件导入mapActions函数
import {mapActions} from 'vuex'
//将指定actions中的函数映射为当前组件的methods函数
methods:{
    ...mapActions(['addAsync']),
    handlel(){
    this.addAsync(3)
     }
}

5.4、getters 计算派生状态

有时你可能需要根据状态来计算一些值，你可以使用 getters 来完成，类似于组件的计算属性。

const store = new Vuex.Store({
    //state定义状态
    state:{
        count: 0  
    },
   
   //计算派生状态
    getters:{
        showNum: state=>{
             return state.count+1
         }
    },
    
    //修改状态（同步）
    mutations:{
       //state: 表示数据状态
       //step: 表示外界传过来的参数（不强制，根据需求）
       add(state,step){
           //state.count++   无参数
           state.count+=step
       }
   }

    //修改状态（异步）
    actions:{
       //stacontext.commit: 表示触发mutations中的函数
       //step: 表示外界传过来的参数（不强制，根据需求）
       addAsync(context,step){
           setTimeout(()=>{
              context.commit('add',step)
          })
       }
   }
})

5.2.1、通过getters访问仓库中的数据

方法1：直接通过getters访问

this.$store.getters.showNum

方法2：导入指定函数

//在当前组件导入mapGetters函数
import {mapGetters} from 'vuex'
//将指定的数据映射为当前组件的computed计算属性
computed:{
    ...mapGetters(['showNum'])
}