Vuex基础入门

基本使用

store文件目录下index.js中

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

Vue.use(Vuex)

export default new Vuex.Store({
  // state存放全局数据
  state: {
    number: 0
  },
  // getters相当于computed
  getters: {
    getNumber (state) {
      return state.number
    }
  },
  // 唯一能修改state里数据的地方（不支持异步）
  mutations: {
    increase (state, payload) {
      state.number += payload || 1
    },
    decrease (state, payload) {
      state.number -= payload || 1
    }
  },
  // 异步修改state里数据的地方,实际修改数据的地方依然是mutations
  actions: {
    // decrease操作延迟一秒
    decreaseDelay (context) {
      setTimeout(() => {
        context.commit('decrease')
      }, 2000)
    }
  },
  modules: {}
})

组件中获取vuex中state数据

1. html中使用{{$store.getters.getNumber}}，$store.state.number
2. Vue实例中js代码部分使用this.$store.getters.getNumber，this.$store.state.number

组件中修改vuex中state数据

// 非异步方法 this.$store.commit(方法名, 参数)
this.$store.commit('increase', 1)

// 异步方法 this.$store.dispatch(方法名, 参数)
this.$store.dispatch('decreaseDelay', 1)

组件中使用辅助函数map*

<template>
  <div>
    <h2>...mapState(['number'])：{{number}}</h2>
    <h2>...mapGetters(['getNumber'])：{{getNumber}}</h2>
  </div>
</template>
<script>
// vuex对象中的属性都可以这样操作包括mutation与action
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState(['number']),
    ...mapGetters(['getNumber'])
  }
}
</script>

<style lang="less">
</style>

拆分写法

store目录下拆分
/store/index.js
/store/state.js
/store/getters.js
/store/mutaions.js
/store/actions.js

store文件目录下state.js中

export default {
  number: 0
}

…

store文件目录下index.js中

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutaions'
import actions from './actions'
// import modules from './modules'
Vue.use(Vuex)

export default new Vuex.Store({
  // state存放全局数据
  state,
  // getters相当于computed
  getters,
  // 唯一能修改state里数据的地方（不支持异步）
  mutations,
  // 异步修改state里数据的地方,实际修改数据的地方依然是mutations
  actions,
  modules: {}
})

当业务复杂时使用modules

store目录下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutaions'
import actions from './actions'
//引入用户模块
import user from './modules/user/user'
//引入图书模块
import book from './modules/book/book'
Vue.use(Vuex)

export default new Vuex.Store({
  // state存放全局数据
  state,
  // getters相当于computed
  getters,
  // 唯一能修改state里数据的地方（不支持异步）
  mutations,
  // 异步修改state里数据的地方,实际修改数据的地方依然是mutations
  actions,
  modules: { user, book }
})

store/moudles/user/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutaions'
import actions from './actions'
Vue.use(Vuex)

export default {
  // 命名空间处理
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
  modules: {}
}

• 要使用和拿到user中的数据和基础用法类似$store.state.user
• 调用user的方法可以使用为了避免模块名字冲突，在模块导出时加一个属性namespaced: true,

test.vue

<template>
  <div>
    <h2>...mapState(['number'])：{{number}}</h2>
    <h2>...mapGetters(['getNumber'])：{{getNumber}}</h2>
    <h2>user：{{$store.state.user}}</h2>
    <h2>user：{{getNumber}}</h2>
  </div>
</template>
<script>
// vuex对象中的属性都可以这样操作包括mutation与action
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState(['number']),
    ...mapGetters(['getNumber']),
      // 因为导出模块添加了namespaced: true,所以调用方法是需指明模块
    ...mapGetters('user', ['getNumber'])
  },
  created () {
    console.log(this.getName)
  }
}
</script>