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
      })

2. 组件中读取vuex中的数据 this.$store.state.xxx
3. 组件中修改vuex中的数据 this.$store.dispatch('action中的方法名', 数据) 或 this.$store.commit('mutations中的方法名', 数据)

• 总结：可以把actions想做一个服务员，mutations想做一个厨师，state想做是一些菜
  • 若没有网络请求或其他业务逻辑，组件也可以越过actions，即不写 dispatch, 直接编写 commit