Vuex的基本使用

基本使用

  1. 初始化数据、配置actions、配置mutations、操作文件store.js
      // 引入Vue核心库
      import Vue from 'vue'
      // 引入Vuex``````
      improt Vuex from 'vuex'
      // 引用Vuex
      Vue.use(Vuex)
      
      const actions = {
        // 响应组件中的动作
        jia(context, value) {
          ......
          context.commit('JIA', value)
        }
      }
      const mutations = {
        // 操作数据
        JIA(state, value) {
          state.sum += value
        }
      }
      // 初始化数据
      const state = {
        sum: 0
      }
      export default new Vuex.Store({
        actions,
        mutations,
        state
      })
  1. 组件中读取vuex中的数据 this.$store.state.xxx
  2. 组件中修改vuex中的数据 this.$store.dispatch('action中的方法名', 数据)this.$store.commit('mutations中的方法名', 数据)
  • 总结:可以把actions想做一个服务员,mutations想做一个厨师,state想做是一些菜
    • 若没有网络请求或其他业务逻辑,组件也可以越过actions,即不写 dispatch, 直接编写 commit
上一篇:软件工程相关论文《Automatic Software Repair: A Survey》的一篇读后综述


下一篇:关于uniapp微信小程序无法在data和template直接获取vuex中数据的解决办法