mapState 辅助函数

2018-05-18 11:26:00
admin
原创
355
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuex 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/2.3.0/vuex.min.js"></script>
</head>
<body>
<div id="app">

</div>

<script>
// make sure to call Vue.use(Vuex) if using a module system

const store = new Vuex.Store({
  state: {
    count: 0,
	
  },
  mutations: {
  	increment: state => state.count++,
    decrement: state => state.count--
  }
})


// 创建一个 Counter 组件
const Counter = {
  template: `<div>
  <p>count:{{ count }}</p>
  <p>countAlias:{{ countAlias }}</p>
  <p>countPlusLocalState:{{localCount}},{{ countPlusLocalState }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>`,
  data: function () {
    return {
      localCount: 5
    }
  },
  //在单独构建的版本中辅助函数为 Vuex.mapState
  //模块化版本:import { mapState } from 'vuex'
  computed: Vuex.mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  }),
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
    	this.$store.commit('decrement')
    }
  }
}

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
</script>
</body>
</html>				
								
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227