Vuex状态管理工具详解-向日葵屋

Vuex状态管理工具详解

自己重新整理了下，方便学习交流。

首先Vuex它是什么，此处从官网截图：
在这里插入图片描述
可以集中式存储管理应用的所有组件状态

使用

1.安装vuex依赖包。

npm install vuex --save

2.创建一个store的文件夹，里面新建一个index.js文件，专门来处理vuex的数据，逻辑。
3.导入vuex包，创建store对象。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({ 
    state: { 
        num: 3
    },
    mutations: { 
        addNum() { 
            this.state.num++
        }
    },
    actions: { 
        addNumAsync(context) { 
            setTimeout(() => { 
                context.commit('addNum')
            }, 3000)
        }
    },
    getters: { 
        showNum: state => { 
            console.log(state)
            return '当前vuex里面的数据为【' + state.num + '】'
        }
    },
})

4.在main.js引入store.js将store对象挂载到vue实例中

import store from './store'
new Vue ({ 
    el:'#app',
    render: h => h(app),
    router,
    //将创建的共享数据对象，挂载到Vue实例中
    //所有的组件，就可以直接从store中获取全局的数据了
    store
})

State

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

在各个组件中访问State数据的方式

第一种方式：

使用差值表达式的方法，把这条数据放进去。

this.$store.state.全局数据名称

第二种方式

//1.从vuex中导入mapState函数
import {  mapState } form 'vuex'
//2.通过导入的mapState函数，将当前组件需要的全部数据，映射为当前组件的computed计算属性：
computed:{ 
    ...mapState(['count'])
}

Mutation

这里在vuex中只能通过Mutation用于变更Store数据，不可以直接操作Store中的数据，主要是为了可以集中监控所有的数据的变化，在这个里面不能写异步的代码。

在各个组件中触发Mutation的方式:

第一种方式：

methods: { 
    add() { 
        //触发Mutation的第一种方式
        this.$store.commit('addNum')
    }
}

第二种方式：

//1.从vuex中导入mapMutations函数
import {  mapMutations } from 'vuex'
//2.通过导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法就可以直接使用
methods: { 
    ...mapMutations(['addNum'])
}

Action

用于处理异步任务

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

在各个组件中触发Action的方式:

第一种方式：

methodss: { 
    handle() { 
        //触发Action的第一种方式
        this.$store.dispatch('addNumAsync')
    }
}

第二种方式：

//1.从vuex中导入mapActions函数
import {  mapActions } from 'vuex'
//通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法就可以直接使用
methods:{ 
    ...mapActions(['addNumAsync'])
}

触发actions异步任务时携带参数，在定义的时候就要先定义好。
定义：

actions: { 
        addNAsync(context,step) { 
            setTimeout(() => { 
                context.commit('addN',step)
            },1000)
        }
    }

触发：

this.$store.dispatch('addNAsync',5)

Getter

它可以对store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性，当store中数据发送变化，Getter的数据也会跟着变化

在各个组件中使用Getter的方式:

第一种方式：

this.$store.getters.名称

第二种方式：

//1.从vuex中导入mapGetters 函数
import {  mapGetters } from 'vuex'
//通过刚才导入的mapGetters 函数，映射为当前组件的computed方法就可以直接使用
computed:{ 
    ...mapGetters(['showNum'])
}

Module

将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

这个的话个人很少用到
贴上一个官方的模板

const moduleA = { 
  state: {  ... },
  mutations: {  ... },
  actions: {  ... },
  getters: {  ... }
}
const moduleB = { 
  state: {  ... },
  mutations: {  ... },
  actions: {  ... }
}
const store = new Vuex.Store({ 
  modules: { 
    a: moduleA,
    b: moduleB
  }
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

可以去官网查看
https://vuex.vuejs.org/zh/guide/modules.html

我个人使用的话一般都是使用第一种方式，步骤少，直接使用

//访问State数据的方式:
this.$store.state.全局数据名称
 //触发Mutation的方式:
this.$store.commit('定义的方法名')
 //触发Action的方式:
this.$store.dispatch('定义的方法名')
 //使用Getter的方式:
this.$store.getters.名称