后端的前端笔记：Vuex

1、Vuex概述

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

使用Vuex管理数据的好处：

• 能够在Vuex中集中管理共享的数据，便于开发和后期进行维护
• 能够高效的实现组件之间的数据共享，提高开发效率
• 存储在Vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

什么样的数据适合存储到Vuex中：

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

2、Vuex的基本使用

1）、安装vuex依赖包

npm install vuex --save

2）、导入vuex包

import Vuex from 'vuex'

Vue.use(Vuex)

3）、创建store对象

export default new Vuex.Store({
	//state中存放的就是全局共享的数据
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

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

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

3、Vuex中的核心特性

1）、State

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

在State对象中可以添加要共享的数据，如：count:0

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

在组件中访问State的方式：

方式一：

this.$store.state.全局数据名称，如：this.$store.state.count

<template>
  <div>
    <h3>当前最新的count值为:{{$store.state.count}}</h3>
    <button>+1</button>
  </div>
</template>

方式二：

先按需导入mapState函数：import { mapState } from 'vuex'

然后数据映射为计算属性：computed:{ ...mapState(['全局数据名称']) }

<template>
  <div>
    <h3>当前最新的count值为:{{count}}</h3>
    <button>-1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

2）、Mutation

Mutation用于修改变更$store中的数据

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据
• 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

定义Mutation：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state, step) {
      // 第一个形参永远都是state也就是$state对象
      // 第二个形参是调用add时传递的参数
      state.count += step
    }
  },
  actions: {
  },
  modules: {
  }
})

在组件中触发Mutation：

方式一：

<template>
  <div>
    <h3>当前最新的count值为:{{count}}</h3>
    <button @click="btnHandler">+1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    btnHandler () {
      this.$store.commit('add', 1)
    }
  }
}
</script>

方式二：

<template>
  <div>
    <h3>当前最新的count值为:{{count}}</h3>
    <button @click="btnHandler">-1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    // 获得mapMutations映射的sub函数
    ...mapMutations(['sub']),
    // 当点击按钮时触发Sub函数
    btnHandler () {
      // 调用sub函数完成对数据的操作
      this.sub(1)
    }
  }
}
</script>

3）、Action

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

方式一：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state, step) {
      // 第一个形参永远都是state也就是$state对象
      // 第二个形参是调用add时传递的参数
      state.count += step
    },
    sub (state, step) {
      state.count -= step
    }
  },
  actions: {
    addAsync (context, step) {
      setTimeout(() => {
        // 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
        context.commit('add', step)
      }, 1000)
    }
  },
  modules: {
  }
})

<template>
  <div>
    <h3>当前最新的count值为:{{count}}</h3>
    <button @click="btnHandler">+1</button>
    <button @click="btnHandler2">+1 Async</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    btnHandler () {
      this.$store.commit('add', 1)
    },
    btnHandler2 () {
      this.$store.dispatch('addAsync', 1)
    }
  }
}
</script>

方式二：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state, step) {
      // 第一个形参永远都是state也就是$state对象
      // 第二个形参是调用add时传递的参数
      state.count += step
    },
    sub (state, step) {
      state.count -= step
    }
  },
  actions: {
    addAsync (context, step) {
      setTimeout(() => {
        // 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
        context.commit('add', step)
      }, 1000)
    },
    subAsync (context, step) {
      setTimeout(() => {
        context.commit('sub', step)
      }, 1000)
    }
  },
  modules: {
  }
})

<template>
  <div>
    <h3>当前最新的count值为:{{count}}</h3>
    <button @click="btnHandler">-1</button>
    <button @click="btnHandler2">-1 Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    // 获得mapMutations映射的sub函数
    ...mapMutations(['sub']),
    ...mapActions(['subAsync']),
    // 当点击按钮时触发Sub函数
    btnHandler () {
      // 调用sub函数完成对数据的操作
      this.sub(1)
    },
    btnHandler2 () {
      this.subAsync(1)
    }
  }
}
</script>

4）、Getter

Getter用于对Store中的数据进行加工处理形成新的数据。它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化

定义Getter：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state, step) {
      // 第一个形参永远都是state也就是$state对象
      // 第二个形参是调用add时传递的参数
      state.count += step
    },
    sub (state, step) {
      state.count -= step
    }
  },
  actions: {
    addAsync (context, step) {
      setTimeout(() => {
        // 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
        context.commit('add', step)
      }, 1000)
    },
    subAsync (context, step) {
      setTimeout(() => {
        context.commit('sub', step)
      }, 1000)
    }
  },
  getters: {
    showNum (state) {
      return '当前最新的数量是【' + state.count + '】'
    }
  },
  modules: {
  }
})

在组件中使用Getter：

方式一：

<template>
  <div>
    <h3>{{$store.getters.showNum}}</h3>
    <button @click="btnHandler">+1</button>
    <button @click="btnHandler2">+1 Async</button>
  </div>
</template>

方式二：

<template>
  <div>
    <h3>{{showNum}}</h3>
    <button @click="btnHandler">-1</button>
    <button @click="btnHandler2">-1 Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    // 获得mapMutations映射的sub函数
    ...mapMutations(['sub']),
    ...mapActions(['subAsync']),
    // 当点击按钮时触发Sub函数
    btnHandler () {
      // 调用sub函数完成对数据的操作
      this.sub(1)
    },
    btnHandler2 () {
      this.subAsync(1)
    }
  }
}
</script>