项目级Vuex构建

基础准备

install包

npm install vuex --save-dev

---

创建数据包

├── index.js				// 将数据包导出
└── modules					// 数据包
    ├── counter				// 单一页面相关数据
    │   ├── actions.js		// 执行异步操作
    │   ├── constant.js		// 定义函数名
    │   ├── index.js		// export
    │   ├── mutations.js	// 执行同步操作
    │   └── state.js		// 存放静态初始值
    └── index.js			// 整合页面信息并导出

由上致下代码架子 —— 开始

index.js				// 将数据包导出

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'
Vue.use(Vuex)

export default new Vuex.Store({
  modules
})

actions.js		// 执行异步操作

import * as constant from './constant'

// actions下的方法会默认接收一个参数，这个参数和$store拥有相同的对象和方法
const actions = {
  [constant.INCREASE_NUMBER_ASYNC] ({ commit }) {	// { commit }解包赋值
    setTimeout(() => {
      commit(constant.CHANGE_NUMBER, { amount: 15 })
    }, 1500)
  }
}

export default actions

constant.js		// 定义函数名

// mutations
export const CHANGE_NUMBER = 'CHANGE_NUMBER'

// actions
export const INCREASE_NUMBER_ASYNC = 'INCREASE_NUMBER_ASYNC'

index.js		// export

// 暴露数据
import actions from './actions'
import mutations from './mutations'
import * as state from './state'

const counter = {
  ...state,
  actions,
  mutations
}

export default counter

mutations.js	// 执行同步操作

import * as constant from './constant'

// mutations下的方法全局通用，第一个参数默认为全局的state
const mutations = {
  [constant.CHANGE_NUMBER] (state, payload) {
    state.number += payload.amount
  }
}
export default mutations

// 初始值
const state = {
  number: 10,
  showDialog: false
}
const getters = {
  math_number (state) { // 这里的state对应着上面这个state
    return state.number + 1
  }
}
export { state, getters }

由上致下代码架子 —— 结束

---

main.js挂载数据包

import store from './store'

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

---

使用手册

获取、修改静态数据

console.log(this.$store.state.counter.number)	// 10
this.$store.state.counter.number += 1
let number = this.$store.state.counter.number
console.log(number)							  // 11

mapState获取静态数据

import { mapState } from 'vuex'
export default {
  computed:{
    //这里的三点叫做 : 扩展运算符
    ...mapState({
      number: state=>state.counter.number,				// 传统写法
      showDialog: ({ counter }) => counter.showDialog	 // 结构赋值
    }),
  }
}

console.log(this.number, this.showDialog)

getters计算state生成新数据

读取getters下的数据
$store.getters.math_number		// 读取getters下的数据

注意 : $store.getters.math_number 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。

mapGetters获取getters数据

import { mapGetters } from 'vuex'

export default {
  computed:{
    ...mapGetters([
        'math_number'
    ])
  }
}

console.log(this.math_number)

---

mutations同步处理数据

调用mutations下的CHANGE_NUMBER方法
$store.commit('CHANGE_NUMBER')			// 普通调用，会默认接收一个全局的state参数
$store.commit('CHANGE_NUMBER', {a: 1})	 // 传参调用

mutations 中的方法是不分组件的 , $store.commit('CHANGE_NUMBER') 会执行所有的 CHANGE_NUMBER 方法。

mapMutations获取同步方法

import { mapMutations } from 'vuex'

export default {
  methods:{
    ...mapMutations([
        'INCREASE_NUMBER'				// 直接引用
    ])
    ...mapMutations({
    	increase: 'INCREASE_NUMBER'		// 应用别名
    })
  }
}

this.INCREASE_NUMBER()					// 调用方法，接受传参
this.increase()

actions异步处理数据

调用actions下的INCREASE_NUMBER_ASYNC方法
$store.dispatch('INCREASE_NUMBER_ASYNC')			// 普通调用，会默认接收一个全局的$store
$store.dispatch('INCREASE_NUMBER_ASYNC', {vm: this}) // 传参调用

mapActions获取同步方法

import { mapActions } from 'vuex'

export default {
  methods:{
    ...mapActions([
        'INCREASE_NUMBER_ASYNC'				// 直接引用
    ])
    ...mapActions({
    	increaseNumber: 'INCREASE_NUMBER_ASYNC'		// 应用别名
    })
  }
}

this.INCREASE_NUMBER()					// 调用方法，接受传参
this.increaseNumber()