Vuex学习笔记

Vuex 学习笔记

记录vuex的一些使用方法，包括：核心概念，模块化，辅助函数，热重载，项目结构等。参考Vuex官网

核心概念

  const store = new Vuex.Store({
    //Vuex使用单一状态树�� ，使用一个对象来保存整个应用层级的状态。
    //state就是这个对象，state里面的属性会保存整个应用需要保存的状态。
    state: {
      count: 0,
      user: {
        name: 'zhangsan'
      }
    },
    //Getter其实跟state差不多，但state的数据格式之类的不太满足要求时，可以在getter中做一些处理再返回。比如：后台返回数据的再一次封装。
    getters: {
      doubleCount: state =>  state.count * 2,
      evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
    },
    //用来更改state的值
    //必须是同步函数
    //遵守Vue的响应规则
    //使用commit来触发更改， store.commit('incrementWithN', 10);
    mutations: {
      //参数1: state
      //参数2: 一般是一个对象
      incrementWithN (state, n) {
        state.count += n
      },
      //当要更改state里面的对象的属性,比如：user的name属性，name要提前声明
      //要不得使用
      setUserName (state, name) {
        state.user.name = name;
      },
      //user的phone属性没有声明
      setUserPhone (state, phone) {
        Vue.set(state.user, 'phone', phone); //使用Vue.set设置
        //或者使用点语法
        state.user = {...state.user, 'phone': phone};
      }
    },
    //actions类似mutations，
    //不同点：
    //Action 提交的是 mutation，而不是直接变更状态；
    //Action 可以包含任意异步操作。
    //使用store.dispacth触发， store.dispacth('incrementWithNAsync', n)
    actions: {
      //context 可以用使用到的模块替换
      //incrementWithNAsync ({commit}, n) -> commit('incrementWithN', n)
      incrementWithNAsync (context, n) {
        //异步和触发mutation
        setTimeout( () => {
          context.commit('incrementWithN', n);
        }, 1000);
      },
      // 假设 getData() 和 getOtherData() 返回的是 Promise
      async actionA ({ commit }) {
        commit('gotData', await getData())
      },
      async actionB ({ dispatch, commit }) {
        await dispatch('actionA') // 等待 actionA 完成
        commit('gotOtherData', await getOtherData())
      }
    }
  })

模块化(待补充)

辅助函数

• mapState
• mapGetters
• mapMutations
• mapActions

项目结构

  ├── index.html
  ├── main.js
  ├── api
  │   └── ... # 抽取出API请求
  ├── components
  │   ├── App.vue
  │   └── ...
  └── store                 # 
      ├── index.js          # 我们组装模块并导出 store 的地方
      ├── states            # states文件夹
      ├── getter            # getter
      ├── actions           # actions
      ├── mutations         # mutations
      └── modules
          ├── cart.js       # 购物车模块
          └── products.js   # 产品模块

热重载

  // store.js
  import Vue from 'vue'
  import Vuex from 'vuex'
  import mutations from './mutations'
  import moduleA from './modules/a'

  Vue.use(Vuex)

  const state = { ... }

  const store = new Vuex.Store({
    state,
    mutations,
    modules: {
      a: moduleA
    }
  })

  if (module.hot) {
    // 使 action 和 mutation 成为可热重载模块
    module.hot.accept(['./mutations', './modules/a'], () => {
      // 获取更新后的模块
      // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
      const newMutations = require('./mutations').default
      const newModuleA = require('./modules/a').default
      // 加载新模块
      store.hotUpdate({
        mutations: newMutations,
        modules: {
          a: newModuleA
        }
      })
    })
  }