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.名称

Module就很少用

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！