VUEX的简单使用

福尔摩斯对我笑 2019-05-29 87719 次 12504条

/ 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
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 12504 条评论 1


  1. jordan shoes

    I definitely wanted to write down a note to be able to say thanks to you for some of the wonderful pointers you are giving here. My prolonged internet investigation has at the end been compensated with beneficial knowledge to exchange with my family members. I ‘d say that most of us website visitors are really blessed to be in a fabulous website with so many lovely professionals with very helpful plans. I feel truly blessed to have seen your webpages and look forward to tons of more exciting moments reading here. Thanks once more for a lot of things.

    回复 2019年10月8日
  2. 小布

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

    回复 2019年6月12日