Vuex 的基本用法

一、Vuex 概述

1.1 Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说，vuex 是实现组件全局状态管理的一种机制，可以方便组件之间的数据共享

1.2 传统的组件之间的共享数据方式

• 父向子传值： v-bind

• 子向父传值：v-on

• 兄弟组件之间共享数据：EvenBus

• $on 接受数据的那个组件

• $emit 发送数据的那个组件

缺点：只能通过父传子 和 子传父的方式传值，若想要两个毫无关系的组件传值则很繁琐（需要找到 他们之间的关系）

二、Vuex初始化

store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        
    },
    mutations:{
        
    },
    actions:{
        
    }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
    store,
    render: h=>h(app)
}).$mount('#app')

三、Vue 的核心概念

• state
• mutations
• actions
• Getter

3.1 State

state上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。

import { mapState } from  'vuex';
export default {
  // ...
  data (){
    localState: 1
  }
  computed: mapState({
    // 此处的state即为store里面的state
    count: state => state.count,
    // 当计算属性的名称与state的状态名称一样时，可以省写
    // 映射 this.count1 为 store.state.count1
    count1,
    //'count'等同于 ‘state => state.count’
    countAlias: 'count',
    countPlus (state){
    // 使用普通函数是为了保证this指向组件对象
      return state.count + this.localState;
    }
  })
}
//上面是通过mapState的对象来赋值的，还可以通过mapState的数组来赋值
computed: mapState(['count']);
//这种方式很简洁，但是组件中的state的名称就跟store中映射过来的同名

3.2 Mutations

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。

3.2.1 Mutations使用方法

mutations方法都有默认的形参：([state] [payload])

·state是当前VueX对象中的state
·payload是该方法在被调用时传递参数使用的

例如，我们编写一个方法，当被执行时，能把下例中的name值修改为"jack",我们只需要这样做

index.js：

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

Vue.use(Vuex)

const store = new Vuex.store({
    state:{
        name:'helloVueX'
    },
    mutations:{
        //es6语法，等同edit:funcion(){...}
        edit(state){
            state.name = 'jack'
        }
    }
})

export default store

而在组件中，我们需要这样去调用这个mutation——例如在App.vue的某个method中:

this.$store.commit('edit')

3.3 Actions

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

·context 上下文(相当于箭头函数中的this)对象
·payload 挂载参数

例如，我们在两秒中后执行上面的edit方法

由于setTimeout是异步操作，所以需要使用actions

actions:{
    aEdit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}

在组件中调用:

this.$store.dispatch('aEdit',{age:15})

改进：
由于是异步操作，所以我们可以为我们的异步操作封装为一个Promise对象

    aEdit(context,payload){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                context.commit('edit',payload)
                resolve()
            },2000)
        })
    }

3.4 Getters

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

state 当前VueX对象中的状态对象

getters 当前getters对象，用于将getters下的其他getter拿来用
例如

getters:{
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
}

组件中调用

this.$store.getters.fullInfo