vuex学习笔记

一、一个简单的学习案例

<body>
  <div id="app">
    <p>{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</body>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment: state => state.count++,
      decrement: state => state.count--
    }
  })
  new Vue({
    el: '#app',
    computed: {
      count() {
      // 每当store.state.count发生变化的时候，都会重新求取计算属性，并且触发更新相关联的DOM
        return store.state.count
      }
    },
    methods: {
      increment() {
        store.commit('increment')
      },
      decrement() {
        store.commit('decrement')
      }
    }
  })
</script>

屏幕快照 2018-07-24 上午11.45.52.png

二、vuex工作原理

vuex工作原理

state

从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

// 访问方法一：
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
// 访问方法二：
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

Getter方法

有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数，getter可以被认为是store的计算属性，如同计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算；

// 定义方法
getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

// 访问方法一
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}
// 访问方法二
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

提交mutation，mutation中都是同步事务

1）在组件中使用this.$store.commit('xxx')提交mutation；
2）使用mapMutations辅助函数将组件中的methods映射为store.commit调用（需要在根节点注入store）；

// commit方法
computed: {
    ...mapState({
      gymList: 'gymList',
    }),
    ...mapGetters({
      gym: 'currentGym',
    }),
    gymId: {
      get() {
        return this.$store.state.gymId
      },
      set(value) {
        this.$store.commit('setGymId', value)
        this.$store.commit('setRoomId', this.gym.roomList ? this.gym.roomList[0].id : '')
      }
    },
// 辅助函数
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

Action

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

// 使用mapActions辅助函数提交
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

if (!state.gymId) {
    context.commit('setGymId', gymList[0].gym.id)
}

一个完整的store包含

const store = new Vuex.Store({
    state: {
      gymList: [],
      gymId: null,
      roomId: null,
      user: {
        username: null,   // 登录用户名
        role: null        // 角色
      }
    },
    //plugins: process.env.NODE_ENV !== 'production' ? [createLogger()] : [],
    getters: {
      currentGym: state => {
        return _.find(state.gymList, {gym: {id: state.gymId}})
      },
    },
    mutations: {
      setGymList(state, payload) {
        state.gymList = payload;
      },
      setGymId(state, payload) {
        state.gymId = payload;
      },
      setRoomId(state, payload) {
        state.roomId = payload;
      },
      setUser(state, payload) {
        state.user = payload
      }
    },
    actions: {
      fetchGymList(context) {
        axios.get(`${api_host}/lego/manage/gym/list`).then((res) => {
          let gymList = res.data.data;
          let state = context.state;

          if (!state.gymId) {
            context.commit('setGymId', gymList[0].gym.id)
          }
          if (!state.roomId) {
            context.commit('setRoom', gymList[0].roomList[0]);
            context.commit('setRoomId', gymList[0].roomList[0].id);
          }

          context.commit('setGymList', gymList)
        });
      }
    },
    modules: {}
});

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters；