vuex的简单使用

Vuex状态管理实战

最新推荐文章于 2024-07-06 21:21:13 发布

吴莉

最新推荐文章于 2024-07-06 21:21:13 发布

阅读量155

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vuex

本文链接：https://blog.youkuaiyun.com/kgcwuli/article/details/95071630

vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并配置Vuex状态管理库，通过实例演示了共享数据的定义、状态获取、异步操作及状态更新的方法。同时，展示了如何在组件中使用Vuex提供的API进行数据读取和操作。

第一步：安装

npm install vuex --save-dev

第二步：引用

全局引入：main.js

import data from "./store/data";
new Vue({
  el: '#app',
  router,
  store:data,
  components: { App },
  template: '<App/>'
})

第三步：写共享数据

 import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

let state = {
	count:1,
	arr:[{
		    id: 11,
		    name: '鱼香肉丝',
		    price: 12,
		  }, {
		    id: 22,
		    name: '宫保鸡丁',
		    price: 14
		  }, {
		    id: 34,
		    name: '土豆丝',
		    price: 10
		  }, {
		    id: 47,
		    name: '米饭',
		    price: 2
		  },{
		    id: 49,
		    name: '蚂蚁上树',
		    price: 13
		  },
		  {
		    id: 50,
		    name: '腊肉炒蒜薹',
		    price: 15
		  }]
}

let getters = {
	getCount(state){
		return state.count;
	},
	isEvenOrOdd(state){
		if(state.count%2==0){
			return '偶数'
		}else{
			return '奇数'
		}
	}
}

let actions = {
	add({commit}){
		commit('doAdd');
	},
	sub({commit}){
		commit('doSub');
	},
}

let mutations = {
	doAdd(state){
		state.count++;
	},
	doSub(state){
		state.count--;
	}
}

let store = new Vuex.Store({
	state,getters,actions,mutations
})
export default store;

第四步:使用共享数据

<template>
	<div>
		<button @click="sub">减少</button>
		<span>{{count}}</span>
		<button @click="add">增加</button>	
		<p>{{isEvenOrOdd}}</p>
	</div>
</template>

<script>
	import {mapActions,mapGetters,mapMutations,mapState} from "vuex";
	export default{
		name:"broadcast",
		// computed:mapState([
		// 	'count','arr'
		// ]),
		// computed:mapGetters([
		// 	'getCount'
		// ]),
		computed:{
			 ...mapGetters({
				count:'getCount',
				isEvenOrOdd:'isEvenOrOdd'
			})
		},
		methods:{
			 ...mapActions({
				add:'add',
				sub:'sub'
			})
		}
	}
</script>