Vuex 用例浅析

管理数据状态的一个库

安装 npm install vuex --save
复制代码

#main.js注入
import store from './store'
new Vue({
    el: '#app',
    router,
    store, // 注入Store 
    components: { App },
    template: '<App/>'
})
复制代码

项目结构

store ---- index.js
      ---- state.js
      ---- getters.js
      ---- mutations.js
      ---- mutationTypes.js
      ---- action.js
      ---- module
        |---- notification.js
复制代码

index.js

import Vue from 'vue'
import Vuex from  ‘vuex'
// 引入模块
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import notification from './module/notification’
// 全局使用
Vue.use(Vuex)
// 曝光
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        notification
    }
})
复制代码

State 初始化全局变量

#state.js
const state = {
    user: null,
    folderAll: null
}
export default state
复制代码

Getter 对变量进行初步筛选或变形

#getters.js
const getters = {
    userRole: state => state.user && state.user.userType
}
export default getters
复制代码

getter 属性另命名

mapGetters({
  // 把 `this.role` 映射为`this.$store.getters.userRole`
  role: 'userRole'
})
复制代码

Mutation 事件类型

1.更改 store 中的状态的唯一方法是提交 mutation
2.限制：mutation 必须同步执行
3.每一个 mutation 都是一个字符串 事件类型 和 回调函数

#mutations.js
import * as MutationTypes from './mutationTypes'
const mutations = {
    [MutationTypes.SET_USER]: (state, payload) => {
        state.user = payload
    },
    [MutationTypes.SET_FOLDER]: (state, payload) => {
        state.folderAll = payload
    }
}
export default mutations
复制代码

mutationTypes.js 使用常量代替mutation事件类型

export const SET_USER = 'SET_USER'
export const SET_FOLDER = 'SET_FOLDER'
复制代码

Actions 异步操作

Action 类似 mutation
1.Action 提交的是 mutation ，而不是直接变更状态
2.Action 可以包含任意异步操作

#actions.js
import * as MutationTypes from './mutationTypes'
const actions = {
    fetchUser: async({ commit }, payload) => {
        try {
            const res = await apis.user.fetchUser(payload)
            commit(MutationTypes.SET_USER, res.data)
            return Promise.resolve(res)
        } catch (err) {
            return Promise.reject(err)
        }
    }
}
export default actions
复制代码

当payload为多个参数时，用{}包裹起来

Module 将 store 分割成模块

#notification.js
const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  state,
  getters,
  mutations,
  actions
}
复制代码

子组件引用

this.$store.state.user
this.$store.getters.userRole
this.$store.commit(MutationTypes.SET_USER, res.data)
this.$store.dispatch('fetchUser', data)
复制代码

当子组件需要获取多个状态时，便捷的操作

import { mapState, mapGetters, mapActions, mapMutations } from ‘vuex'
computed: {
    ...mapState([ 'user', 'folderAll']),
    ...mapGetters({
        userRole: 'userRole'
    })
},
methods: {
    ...mapMutations({
        setUserInfo: MutationTypes.SET_USER
    }),
    ...mapActions(['fetchUser', 'login', 'orgLogin']),
}
复制代码

识别…需要安装插件babel-preset-stage-2

npm install babel-preset-stage-2 --save-dev
复制代码

#.babelrc
{
    "presets": [
        ["env", { "modules": false }],
        ["stage-2"]
    ]
}
复制代码