vue状态管理入门(vuex)

  • 1.通过vue-cli搭建项目后,安装vuex,即npm i -s vuex;

  • 2.在src目录下新建目录store,store目录下新建index.js文件,内容如下:

	import Vue from 'vue'
	import Vuex from 'vuex'
	
	Vue.use(Vuex)
	
	const store = new Vuex.Store({
	  //state充当数据源
	  state: {
	    count: 1
	  },
	  //getters中声明方法获取数据源中的值
	  getters: {
	    getStateCount: function (state) {
	      return state.count + 1
	    }
	  },
	  //mutations中定义方法,在页面提交,可以改变数据源中的值
	  //见后面的代码中可以看到this.$store.commit('add', n);
	  mutations: {
	    add(state, n){
	      state.count = state.count + n
	    },
	    sub(state, n){
	      state.count = state.count - n
	    }
	  },
	  //我们除了可以使用this.$store.commit改变数据源中的值,还有一种
	  //形式,就是我们不直接在页面提交,二是在页面中dispatch调用actions
	  //中的方法,在actions中提交,这是官方比较建议的
	  actions: {
	    addFun(context, n){
	      context.commit('add', n)
	    },
	    subFun(context, n){
	      context.commit('sub', n)
	    }
	  }
	})
	
	export default store
  • 3.在main.js中引入store,如下变化:
	import Vue from 'vue'
	import App from './App'
	import router from './router'
	import store from './store';
	
	Vue.config.productionTip = false
	
	new Vue({
	  el: '#app',
	  router,
	  store,
	  components: { App },
	  template: '<App/>'
	})
  • 4.在页面使用:
<template>
  <div class="hello">
    <h3>计数:{{this.$store.state.count}}</h3>
    <h3>计数:{{this.$store.getters.getStateCount}}</h3>
    <button @click="addFun">+</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button @click="subFun">-</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  },
  methods: {
    addFun(){
      var n = 110;
      // this.$store.commit('add', n);//直接调用mutations中的add方法
      this.$store.dispatch('addFun', n);//调用actions中的addFun方法
    },
    subFun(){
      var n = 110;
      // this.$store.commit('sub', n);
      this.$store.dispatch('subFun', n);
    }
  }
}
</script>
发布了45 篇原创文章 · 获赞 3 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览