vue之vuex

发表于： 2019年1月3日 2019年1月15日
分类： Vue.js

引入vuex文件

<script src="./vue.js" type="text/javascript"></script>
<script src="./vuex.js" type="text/javascript"></script>

页面js

<script>
 const store=new Vuex.Store({
     state:{
         count:0
     },
     mutations:{
         increment(state){
             state.count++
         }
     }
 });
</script>

运行后google浏览器控制台调试结果

>store.state.count
<0
>store.commit('increment')
<undefined  
>store.state.count
<1

一个vuex的demo
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="container">  <!--VUE实例的挂载点-->
	</div>
	</body>
<script type='text/javascript' src='main.js'></script>
</html>

main.js

import Vue from 'vue'
import app from './components/app.vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store=new Vuex.Store({
	state:{         //状态管理data数据
		count:1
	},
	mutations:{    //状态管理方法
	    //最多支持两个参数   参数1是state状态  参数2是提交过来的参数
		increment(state,arg){
			state.count=state.count+arg;
		},
		minus(state,arg){
			state.count=state.count-arg;
		}
	},
	getters:{ //这里的getters只负责提供数据,不负责修改数据
	    getCount:function(state){
			return state.count;
		}
 
	}
})
 
new Vue({
	el: '#container',
	data: {
 
	},
	render: function(createElement) {    //创建虚拟DOM
		return createElement(app);
	},
	store:store
})

app.vue

<template>
	    <div>
			<counter></counter>
			<amount></amount>
		</div>
</template>
 
<script>
	import counter from './counter.vue'
	import amount from './amount.vue'
	export default {
		data() {
			return {
 
			};
		},
		components:{
			counter,
			amount
		}
	}
</script>
<style>
</style>

counter.vue

<template>
	<div>
		<button @click="minus">减少</button><button @click="plus">增加</button>
		<input type="text" v-model="$store.state.count"/>
	</div>
</template>
<script>
	export default {
		data() {
			return {
			};
		},
		methods:{
			minus(){
				//调用状态管理的方法并传递参数  只能传递两个参数   方法名+方法参数
				this.$store.commit('minus',4);
			},
			plus(){
				//这种直接操作store数据的方法不推荐   因为每个组件都能操作数据,如果出现数据紊乱无法快速追踪
				//this.$store.state.count++;
				//调用状态管理的方法并传递参数
				this.$store.commit('increment',4);
			}
		}
	}
</script>
<style>
</style>

amount.vue

<template>
	<div>
		<!--访问store中的state,获取数据-->
		当前总数量:{{$store.state.count}}
 
		<!-- Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值 -->
		当前总数量:{{$store.getters.getCount}}
	</div>
</template>
<script>
	export default {
		data() {
			return {
 
			};
		}
	}
</script>
<style>
</style>

无心者

最难走的路，往往是上坡路。

224

无心者

发表评论 取消回复

发表评论取消回复