VueX 学习Part__02

使用modules

1. 将五大将拆分

state.js

export default {
  count: 1,
  msg: '学习vuex',
  sites: [
    { id: 1, text: 'Runoob' },
    { id: 2, text: 'Google' },
    { id: 3, text: 'Taobao' }
  ]
}

getters.js

export default {
  count (state) {
    return state.count
  },
  sites (state) {
    console.log(state)
    return state.sites
  },
  item: (state) => (i) => {
    return state.sites[i]
  }
}

mutations.js

export default {
  // addNum (state, num) {
  //   state.count += num
  // },
  // 不要再这里操作异步数据
  addNumAsyn (state, payload) {
    setTimeout(() => {
      state.count += payload.num
    }, 1000)
  },
  addNumByAction (state, payload) {
    state.count += payload.num
  },
  addNum (state, payload) {
    state.count += payload.num
  }
}

actions.js

export default {
  addNumAsynAciton ({commit}, payload) {
    setTimeout(() => {
      commit('addNumByAction', payload)
    }, 1000)
  }
}

综合为index.js

import Vue from 'vue'

// 1.导入vuex
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)
export default {
  state,
  getters,
  mutations,
  actions
}

整体导入store.js

// 1.导入vuex
import Vuex from 'vuex'

import moduleA from './store/moduleA/index'

export default new Vuex.Store({
  // 五大组件
  modules: {
    a: moduleA
  }
})

2.在组件内引用

• 方式一:引用state

  computed: {
    count () {
      return this.$store.state.a.count
    }
  }

• 方式二:引用getters

  computed: {
    count () {
      return this.$store.getters.count
    }
  }

---

使用Vuex需要注意的坑

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

最好提前在你的 store 中初始化好所有所需属性。

当需要在对象上添加新属性时，你应该

使用 Vue.set(obj, ‘newProp’, 123), 或者

以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

比放说，当我们在state中定义一个对象属性时

  myProps: {

  }

当我们在组件中想要修改myProps对象中的值时

   updateMyProps () {
      this.$store.dispatch('updatemyprops', {name: 'clearlove'})
    }

actions.js

  updatemyprops ({commit}, payload) {
    commit('updateMyProps', payload.name)
  }

mutations.js

 updateMyProps (state, payload) {
    state.myProps.name = payload.name
  }

myProps中的值确实会被修改，但是视图并不会得到响应，因为vue监测不到对象内属性的变化

解决方案：使用set

mutations.js

  updateMyProps (state, payload) {
    // state.myProps.name = payload.name
    Vue.set(state.myProps, 'name', payload.name)
  }