VUEX的简单使用

福尔摩斯对我笑 2019-05-29 69 次 1条

/ state,驱动应用的数据源;
// view,以声明方式将 state 映射到视图;
// actions,响应在 view 上的用户输入导致的状态变化。


const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state=> state.count ++ ,
    decrement: state=> state.count--
  },
  // Action 提交的是 mutation,而不是直接变更状态。
  actions: {
    increment (context, seek){
      console.log(seek);
      context.commit('increment')
    }
  }
})



  new Vue({
    el: '#app',
    // computed : {
    //   count(){
    //     // return store.state.count
    //     // console.log(this.$store.state);
    //     return this.$store.state.count
    //   }
    // },
    //映射
    computed: new Vuex.mapState({
      count: state => state.count,
      countAlisa: 'count', //好像是别名
      countPlusLocalState (state) {
        return state.count + this.localCount
      }
    }),
    
    store,
    methods: {
      increment (){
          // store.commit('increment')
          store.dispatch('increment', 'seek') // 派发触发-》actions-》mutaions , action 内部可以执行异步
      },
      decrement (){
        store.commit('decrement')
      }
    }
  })


  // store.state 来获取状态对象
  // store.commit 方法触发状态变更
  // 再次强调,我们通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外,这样也让我们有机会去实现一些能记录每次状态改变,保存状态快照的调试工具。有了它,我们甚至可以实现如时间穿梭般的调试体验。


  // mapState 辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键:



// store.state.count= 10
store.commit('increment')
console.log(store.state.count)

See the Pen
vuex的简单使用
by SeekHappy (@Mister-weizhuang)
on CodePen.

标签: 无

非特殊说明,本博所有文章均为博主原创。

头像也是LOGO
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 1 条评论 1


  1. 小布

    建议将源码如果能公开的话,放到github,然后在文章放个链接,对你自身也有好处 ^ – ^

    回复 2019年6月12日