VUEX的简单使用

福尔摩斯对我笑 2019-05-29 98516 次 13258条

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

发表评论



 


已有 13258 条评论 1


  1. mbt shoes

    I want to show my appreciation to the writer just for bailing me out of this setting. After surfing through the search engines and obtaining tricks that were not pleasant, I assumed my life was over. Existing minus the approaches to the issues you have resolved by means of your entire write-up is a serious case, and the ones which might have in a wrong way damaged my career if I had not noticed your web site. Your actual talents and kindness in maneuvering all the details was tremendous. I’m not sure what I would’ve done if I had not come upon such a stuff like this. I can also at this time look ahead to my future. Thanks for your time very much for your professional and results-oriented help. I will not think twice to propose your web page to anybody who requires guidance about this subject.

    回复 2019年10月11日
  2. golden goose sneakers

    I wanted to put you a bit of word in order to say thanks a lot the moment again for these stunning tricks you have contributed on this website. It’s certainly tremendously open-handed of you to grant without restraint precisely what a lot of people could have made available as an e-book to help make some money for themselves, primarily considering that you might well have done it if you desired. These smart ideas additionally acted as a easy way to understand that the rest have the identical dreams like my personal own to know the truth more and more with regard to this matter. I am sure there are some more pleasurable situations ahead for individuals that browse through your blog post.

    回复 2019年10月10日
  3. moncler outlet

    I’m just commenting to let you know what a fabulous encounter my wife’s daughter encountered browsing the blog. She figured out such a lot of things, not to mention what it’s like to possess an awesome giving mood to make others smoothly grasp selected very confusing issues. You really did more than people’s desires. Many thanks for delivering these warm and helpful, healthy, explanatory and as well as easy tips on that topic to Janet.

    回复 2019年10月9日
  4. yeezy 500

    I happen to be writing to make you know what a terrific experience our princess went through reading through your webblog. She learned a wide variety of things, including what it’s like to have a very effective coaching mindset to get other individuals without hassle have an understanding of several advanced issues. You undoubtedly did more than readers’ expected results. Many thanks for supplying those invaluable, healthy, explanatory not to mention fun thoughts on your topic to Jane.

    回复 2019年10月8日
  5. 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日
  6. 小布

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

    回复 2019年6月12日