vuex状态管理工具的基础使用

vuex应用程序开发的状态管理模式

• 创建store文件

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {}, // 存储共享数据
    mutations: {}, // 修改共享数据
    getters: {}, // 获取处理后的数据
    actions:{},
    modules:{}
})

• state - 共享数据存储
  • store引用方法：this.$store === import store

// store.js
export default new Vuex.Store({
    state: {
        count: 0
    }
})

// component调用方法一
export default {
  computed: {
    count() {
      return this.$store.state.number;
    },
  }
}

// component调用方法二
import { mapState } form 'vuex';
export default {
  computed: {
    ...mapState({
        count: 'count'
    }),
    ...mapState(['count']),
    ...mapState({
        count: state => state.count
    })
  }
}

• mutations - 修改共享数据
  • mutations 必须同步执行

// store.js文件
export default Vue.Store({
    state: {
        count: 0
    },
    mutations: {
        addCount(state) {
            state.count++;
        },
        cutCount(state) {
            state.count--;
        }
    }
})

// mutations调用方法一
methods: {
    addCount() {
        this.$store.commit('addCount');
    }
}

// mutations调用方法二
methods: {
    ...mapMutations([
        'addCount', 'cutCount'
    ])
},

• getters 获取编辑后的共享数据

// store.js文件
export default new Vuex.Store({
    state: {
        count: 0;
    },
    getters: {
        doubleCount: state => state.count * 2
    }
})

// component 调用方法一
computed: {
    doubleCount() {
        return this.$store.getters.doubleCount;
    }
}

// component 调用方法二
computed: {
    ...mapGetters(['doubleCount']),
}

• actions - 提交的是 mutation，而不是直接变更状态
  • actions 可以异步操作

// store.js 文件
export default Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        addCount: state => state.count++
    },
    actions:{
        increment(context) {
            setTimeout(() => {
                context.commit('addCount');
            }, 2000);
        }
    },
})

// component 调用方法一
methods: {
    increment() {
        this.$store.dispatch('increment').then(
            res => {...}
        );
    }
}

// component 调用方法二
methods: {
    ...mapActions(['increment'])
}

• module - 将store分割成模块管理
  • namespace: true；启用命名空间，需通过路径访问

a.js文件  模块2

const state = {
    name: '张三'
}
const mutations = {
    changeName: (state, name) => state.name = name
}
const actions = {
  actionChangeName({ commit }, name) {
      commit('changeName', name);
  }
}
export default {
  namespaced: true, // 命名空间
  state,
  mutations,
  actions
}

 b.js文件 模块2

const state = {
    name: '李四'
}
const mutations = {
    changeName: (state, name) => state.name = name
}
const actions = {
  actionChangeName({ commit }, name) {
      commit('changeName', name);
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

getters.js文件  便于组件直接获取模块中的state

const getters = {
    nameA: state => state.a.name,
    nameB: state => state.b.name
}

export default getters;

index.js store文件

import Vue from 'vue';
import Vuex from 'vuex';
import a from './modules/a'
import b from './modules/b'
import getters from './getters'

Vue.use(Vuex);
export default new Vuex.Store({
  modules:{
    a, b
  },
  getters
})

模块快速引入办法

// 快速引入所有模块
import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters'

Vue.use(Vuex);

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

export default new Vuex.Store({
  modules,
  getters
})

 

 组件内调用：

computed: {
    // 直接获取state
    ...mapState({
        nameA: state => state.a.name,
        nameB: state => state.b.name,
    })
    // 通过getters文件
    ...mapGetters(['nameA', 'nameB'])
},
methods: {
    change() {
        this.$store.commit('a/changeName', '王五');
        this.$store.dispatch('b/actionChangeName', '马六');
    }
},