vuex的基本使用

1、步骤

1.1、安装vuex

　　在控制台执行命令：npm install --save vuex

1.2、在src下创建vuex的核心管理模块store.js

/**
 * vuex的核心管理模块
 */
import Vue from 'vue'
import Vuex from 'vuex'
// 声明使用vuex插件
Vue.use(Vuex)

// 定义state状态对象
const state = {
  count: 0
}

// 包含多个更新state的函数对象,由actions内的函数触发调用
const mutations = {
  addFunc(state) {
    state.count++
  },
  minusFunc(state) {
    state.count--
  }
}

// 包含多个间接更新state的函数对象(由vue组件触发调用)
const actions = {
  add({commit}) {
    // 触发调用mutations的addFunc函数
    commit('addFunc')
  },
  minus({commit}) {
    // 触发调用mutations的minusFunc函数
    commit('minusFunc')
  },
  // {commit, state},这种写法表示函数的入参是对象,且其中有commit和state属性
  addIfCountOdd({commit, state}) {
    if (state.count % 2 !== 0) {
      commit('addFunc')
    }
  },
  addByAsync({commit}) {
    setTimeout(() => {
      // 触发调用mutations的addFunc函数
      commit('addFunc')
    }, 1000)
  }
}

// 包含多个计算属性函数的对象
const getters = {
  countType(state) {
    return state.count % 2 === 0 ? '偶数' : '奇数'
  }
}
// 向外暴露对象
export default new Vuex.Store({
  state, // 状态对象
  mutations, // 包含多个更新state的函数对象
  actions, // 包含多个间接更新state的函数对象(由vue组件调用)
  getters // 包含多个计算属性函数的对象
})

1.3、在vue入口main.js中引入vuex的核心管理模块

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入vuex的核心管理模块
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store // 所有的vue组件实例中会增加一个$store属性
})

1.4、在vue组件中使用

<template>
  <div>
    <p>count is:{{$store.state.count}},countType is {{countType}}</p>
    <button @click="add">add</button>
    <button @click="minus">minus</button>
    <button @click="addIfCountOdd">addIfCountOdd</button>
    <button @click="addByAsync">addByAsync</button>
  </div>
</template>
<script>
export default {
  methods: {
    add() {
      // 触发调用vuex的核心管理模块中actions的add函数
      this.$store.dispatch('add')
    },
    minus() {
      // 触发调用vuex的核心管理模块中actions的minus函数
      this.$store.dispatch('minus')
    },
    addIfCountOdd() {
      // 触发调用vuex的核心管理模块中actions的addIfCountOdd函数
      this.$store.dispatch('addIfCountOdd')
    },
    addByAsync() {
      // 触发调用vuex的核心管理模块中actions的addByAsync函数
      this.$store.dispatch('addByAsync')
    }
  },
  computed: {
    countType() {
      // 读取vuex的核心管理模块中计算属性countType的值
      return this.$store.getters.countType
    }
  }
}
</script>
<style scoped>
</style>

2、改进

2.1、对vue组件改进1

<template>
  <div>
    <p>count is:{{count}},countType is {{countType}}</p>
    <button @click="add">add</button>
    <button @click="minus">minus</button>
    <button @click="addIfCountOdd">addIfCountOdd</button>
    <button @click="addByAsync">addByAsync</button>
  </div>
</template>
<script>
// 引入vuex的mapState, mapGetters, mapActions映射
import {mapState, mapGetters, mapActions} from 'vuex'
export default {
  methods: {
    // vue组件中的方法和vuex核心管理模块的actions中的函数名一致时的写法
    ...mapActions(['add', 'minus', 'addIfCountOdd', 'addByAsync'])
  },
  computed: {
    // vue组件中的变量名和vuex核心管理模块的state中的属性名一致时的写法
    ...mapState(['count']),
    // vue组件中的变量名和vuex核心管理模块的getters中的函数名一致时的写法
    ...mapGetters(['countType'])
  }
}
</script>
<style scoped>
</style>

2.2、对vue组件改进2

<template>
  <div>
    <p>count is:{{mycount}},countType is {{mycountType}}</p>
    <button @click="myadd">add</button>
    <button @click="myminus">minus</button>
    <button @click="myaddIfCountOdd">addIfCountOdd</button>
    <button @click="myaddByAsync">addByAsync</button>
  </div>
</template>
<script>
// 引入vuex的mapState, mapGetters, mapActions映射
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  methods: {
    // vue组件中的方法和vuex核心管理模块的actions中的函数名不一致时的写法
    // 用对象的方式指定映射关系
    ...mapActions({
      myadd: 'add',
      myminus: 'minus',
      myaddIfCountOdd: 'addIfCountOdd',
      myaddByAsync: 'addByAsync'
    })
  },
  computed: {
    // vue组件中的变量名和vuex核心管理模块的state中的属性名不一致时的写法
    // 用对象的方式指定映射关系
    ...mapState({mycount: 'count'}),
    // vue组件中的变量名和vuex核心管理模块的getters中的函数名不一致时的写法
    // 用对象的方式指定映射关系
    ...mapGetters({mycountType: 'countType'})
  }
}
</script>
<style scoped>
</style>