vuex,咱交个朋友

2017-03-28  本文已影响0人  Candy程
初识,我觉得你挺好

每一个vuex应用的核心是store。vuex的突出特质为:

  1. vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(store.commit) mutations。如以下代码:
//创建一个store
// 如果在模块化构建系统中,在开头应调用了 Vue.use(Vuex)
const store = Vuex.Store({
        state: {
            count: 0
        },
        motations: {
            increment (state) {
                  state.count++
            }
        }
})
//store.state 来获取状态对象, store.commit 方法触发状态变更
store.commit('increment')
console.log(store.state.count) //  1
  1. 其主要包括state、motations、getters、action和modules。
靠近,我说你觉得我怎样

vue 组件中获得 vuex 状态的方法主要有两种:

  1. 在组件的计算属性中返回。
    缺点:在模块化的构建系统中,在每个需要使用 state 的组件中需要频繁地导入,并且在测试组件时需要模拟状态。
  2. 将状态从根组件『注入』到每一个子组件中
    在根组件(main.js)中注入的方法:
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通过上述代码,store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到:

const Counter = {
     template: `<div>{{ count }}</div>`,
     computed: {
          count () {
              return this.$store.state.count
         }
     }
}

哪些状态该放入vuex,哪些状态作为局部状态更好呢??
其实,这个问题完全由习惯和开发需要决定。个人认为,对于多组件共享的状态应该放入vuex,严格属于单组件的状态还是乖乖作为组件的局部状态为好。

上一篇下一篇

猜你喜欢

热点阅读