Vuex 状态管理器

1. 安装

npm install vuex --save

2. 创建一个store仓库 store.js

3. 引入

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

Vue.use(Vuex)

4 .挂载

在main.js中
import store from './store/store.js'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

5. 使用

(1)State提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中进行存储
(2)Mutation 用于变更Store 中的数据
(3) 只能通过mutation 变更Store数据，不可以直接操纵Store中的数据
(4) 通过这种方式虽然操作起来稍微繁琐些，但是可以集中监控所有数据 的变化
(5)mutation中不能执行异步的操作
(6)Action 用于处理异步任务
注：如果通过异步操作变更数据，必须通过Action, 不能使用Mutation但是在Action中还是要通过Mutation的方式间接变更数据
(7)Getter用于对Store中已有的数据加工处理以后形成新的数据，类似与Vue 的计数器
(8)Store 中的数据发生变化，Getter的数据也会跟着变化

export default new Vuex.Store({
  state: {
    count: 0
  },
 // 只有mutations才有权限变更state的数据
  mutations: {
    add (state) {
      state.count++
    },
    // 传参
    addN (state, step) {
      state.count += step
    },
    sub (state) {
      state.count--
    },
    // 传参
    subN (state, step) {
      state.count -= step
    }
  },
 // context 相当于vuex的一个实例对象
  actions: {
    addAsync (context) {
      setTimeout(() => {
        // 依然调用 mutations的commit方法变更数据
        context.commit('add')
      }, 1000)
    }，
  // 传参
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }，
 subAsync (context) {
      setTimeout(() => {
        // 依然调用 mutations的commit方法变更数据
        context.commit('sub')
      }, 1000)
    },
    // 传参
    subNAsync (context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
  },
  getters: {
    showNun: state => {
      return '当前最新的的值是【' + state.count + '】'
    }
  }
})

(3). 新建组件addition.vue subtraction.vue在app.vue中调用

(1) 组件中访问state中的数据的第一种方式
this.$store.state.全局数据名称 如 {{$store.state.count}}
(2) 组件中触发 mutation 的第一种方式
this.$store.commit('mutations中的方法') 如 this.$store.commit('add')
(3) 组件中触发 Action的第一种方式
this.$store.dispatch('actions中的方法') 如 this.$store.dispatch('addAsync')
(4) 组件中触发getters的第一种方法
this.$store.getters.名称 如 {{$store.getters.showNun}}

<template>
  <div>
    <!-- <p>当前最新的的值是: {{$store.state.count}}</p> -->
    <h3>{{$store.getters.showNun}}</h3>
    <button @click="addCount">+ 1</button>
    <button @click="addNCount">+ N</button>
    <button @click="addAsyncCount">+ Async</button>
   <button @click="addAsyncNCount">+N Async</button>
  </div>
</template>
<script>
export default {
  name: 'addition',
  data () {
    return {}
  },
  methods: {
    // commit 是触发Mutation的方法
    addCount () {
      this.$store.commit('add')
    },
    addNCount () {
      this.$store.commit('addN', 3)
    },
    // dispatch是触发Action 的方法
    addAsyncCount () {
      this.$store.dispatch('addAsync')
    }，
,
    addAsyncNCount () {
      this.$store.dispatch('addNAsync', 3)
    }
  }
}
</script>
<style  scoped>
</style>

3.3 组件中访问 state 中的数据的第二种方式

(1) 从vuex中按需导入 mapState 函数
import { mapState } from 'vuex'
(2) 通过导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

     computed: {
      ...mapState(['count'])
        }

3.4 组件中访问mutation中的数据的第二种方式

(1) .从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'
(2) 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: { ...mapMutations(['add'], 'addN') }
(3) 直接在methods方法调用或者直接绑定给click 函数 @click="subNAsync(2)
handleCubtraction () { this.sub() }
@click="subNAsync(2)

3.5 组件中访问Action 的第二种方式

(1) 从 vuex中按需导入 mapActions 函数
import { mapActions } from 'vuex'

(2) 将指定的actions函数，映射为当前组件的 methods函数
methods: { ...mapActions(['subAsync', 'subNAsync']), }

3.6 组件中访问getters中的数据的第二种方式

(1) . 从vuex中按需导入 mapGetters 函数
import { mapGetters } from 'vuex'
(2) 通过导入的mapGetters 函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
computed: { ...mapGetters(['showNun']) }

<template>
  <div>
    <!-- <p>当前最新的的值是: {{count}}</p> -->
    <p>{{showNun}}</p>
    <button @click="handleCubtraction">- 1</button>
    <button @click="subN(2)">- 6</button>
    <button @click="subAsync">- Async</button>
    <button @click="subNAsync(2)">-3 Async</button>
  </div>
</template>
<script>
import {
  mapState, mapMutations, mapActions, mapGetters
} from 'vuex'
export default {
  name: 'subtraction',
  data () {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNun'])
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    handleCubtraction () {
      this.sub()
    }
  }
}
</script>
<style  scoped>
</style>