Vuex(1)实例的详细代码及步骤

最新推荐文章于 2022-11-20 23:34:47 发布
最新推荐文章于 2022-11-20 23:34:47 发布
阅读量225 收藏 2
点赞数 1
分类专栏： vue & vuex 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Janner668/article/details/113931887
版权
本文详细介绍了如何使用Vuex创建一个实例，包括设置store、创建组件、路由配置、数据访问、状态管理、异步操作、以及与服务器的数据交互。涵盖了从创建Vuex应用到处理商品信息、年龄变更、添加新商品和获取服务器数据的全过程。
摘要由CSDN通过智能技术生成

Vuex(1)实例的详细代码及步骤

  1. 使用脚手架，自己创建或者使用现成的，我使用的是现成的脚手架

若创建脚手架，在cmd命令行中操作
npm create 新建项目名

[详细安装脚手架步骤指路->](https://blog.csdn.net/Janner668/article/details/113932309)
  1. store中的index.js是用来保存数据(应用程序)的，在store存储数据

store - index.js

export default new Vuex.Store({
	//存储组件中共享的状态
	state: {

	}
})
  1. 在views文件目录下，创建2个vue文件 Access1 Access2

Access1.vue —— 用来访问所有数据

<template>
	<div>1234</div>
</template>

Access2.vue

<template>
	<div>1234</div>
</template>
  1. 在router下的index.js文件添加上边2个vue文件的路由

router - index.js

import Access1 form '../views/Access1.vue';
import Access2 from '../views/Access2.vue';

router-index.js

const routes =[
	{
		path:'/access1',
		component:Access1	
	},
	{
		path:'/access2',
		component:Access2
	}
]
  1. 在继承终端打开vue文件检查，命令时npm run serve
    终端
npm run serve
  1. 给vue文件中的div添加信息，给store中创建数据

Access1.vue —— 用来访问所有数据

<template>
	<div>
		<h1> 访问vuex数据01 </h1>
		<p>用户名:Tom</p>
		<p>年龄:23</p>
		<p>性别:男</p>
		<h2>库存有4件:</h2>
		<p>1 海信（Hisense）60E3F 65英寸 4K超高清 2696</p>
	</div>
</template>

Access2.vue

<template>
	<div>
		<h1> 访问vuex数据02 </h1>
		<p>用户名:Tom</p>
		<p>年龄:23</p>
		<p>性别:男</p>
	</div>
</template>

store - index.js

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
	}
})
  1. 在组件中访问state中的数据{{}}，输出和脚本都得写

Access1.vue —— 用来访问所有数据

<template>
	<div>
		<h1> 访问vuex数据01 </h1>
		<p>用户名:{{this.$store.state.username}}</p>
		<p>年龄:{{this.$store.state.age}}</p>
		<p>性别:{{this.$store.state.sex}}</p>
		<h2>库存有4件，如下:</h2>
		<p>1 海信（Hisense）60E3F 65英寸 4K超高清 2696</p>
	</div>
</template>

Access2.vue

<template>
	<div>
		<h1> 访问vuex数据02 </h1>
		<p>用户名:Tom</p>
		<p>年龄:23</p>
		<p>性别:男</p>
	</div>
</template>
  1. 在脚本中添加新的商品信息，用数组保存数据信息

store - index.js

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	}
})
  1. 循环遍历输出商品信息内容

Access1.vue

<template>
	<div>
		<h1> 访问vuex数据01 </h1>
		<p>用户名:{{this.$store.state.username}}</p>
		<p>年龄:{{this.$store.state.age}}</p>
		<p>性别:{{this.$store.state.sex}}</p>
		<h2>库存有4件，如下:</h2>
		<p v-for="(item,index) of this.$store.state.products" :key="index">
			{{item.id}} {{item.productName}} {{item.salePrice}}
		</p>
	</div>
</template>
  1. 存储组件中共享的状态getters

store - index.js

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	},//state结束
	getters:{
		//1.state自动代表当前store中的state内的全部状态
		//state作为属性使用--计算商品的件数
		getNumber(state){
			return state.products.length;
		}
	},//getter结束
})
  1. 输出时，带入组件中共享的状态{{}}

Access1.vue

<template>
	<div>
		<h1> 访问vuex数据01 </h1>
		<p>用户名:{{this.$store.state.username}}</p>
		<p>年龄:{{this.$store.state.age}}</p>
		<p>性别:{{this.$store.state.sex}}</p>
		<h2>库存有{{this.$store.getters.getNumber}}件，如下:</h2>
		<p v-for="(item,index) of this.$store.state.products" :key="index">
			{{item.id}} {{item.productName}} {{item.salePrice}}
		</p>
	</div>
</template>
  1. 在每个商品信息的后边加链接 点击链接即可查看商品的详细信息

Access1.vue

<template>
	<div>
		<h1> 访问vuex数据01 </h1>
		<p>用户名:{{this.$store.state.username}}</p>
		<p>年龄:{{this.$store.state.age}}</p>
		<p>性别:{{this.$store.state.sex}}</p>
		<h2>库存有{{this.$store.getters.getNumber}}件，如下:</h2>
		<p v-for="(item,index) of this.$store.state.products" :key="index">
			{{item.id}} {{item.productName}} {{item.salePrice}}
			//添加查看商品详细信息的链接 to='接口/id'
			<router-link :to="`/`">查看</router-link>
		</p>
	</div>
</template>
  1. 在views下创建详细信息组件products.vue，并在router中的index.js添加新路由
    创建新组件products.vue用来获取用户触发的链接传回的id信息，然后在products.vue中返回某个商品的详细信息

products.vue

<template>
	<div>
		<h1>商品信息如下：</h1>
    	<p>商品ID:{{ product.id }}</p>
    	<p>商品名称:{{ product.productName }}</p>
    	<p>商品价格:{{ product.salePrice }}</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
		  product:{},
		}
	},
	mounted(){
	},
}
</script>

router-index.js

import Product from '../views/Product.vue';

const routes=[
	{
		path:'product',
		component:Product
	}
];
  1. 输出时，取出商品的id
    提示： 冒号” : ”代表{{}}是可以动态变化的

Access1.vue

<template>
	<div>
		<h1> 访问vuex数据01 </h1>
		<p>用户名:{{this.$store.state.username}}</p>
		<p>年龄:{{this.$store.state.age}}</p>
		<p>性别:{{this.$store.state.sex}}</p>
		<h2>库存有{{this.$store.getters.getNumber}}件，如下:</h2>
		<p v-for="(item,index) of this.$store.state.products" :key="index">
			{{item.id}} {{item.productName}} {{item.salePrice}}
			//添加查看商品详细信息的链接 to='接口/id' 输出取出商品id -- index
			<router-link :to="`/product?index=${index}`">查看</router-link>
		</p>
	</div>
</template>
  1. 在商品详细信息插件中写脚本，获取被点击商品的id和信息

products.vue

<template>
	<div>
		<h1>商品信息如下：</h1>
    	<p>商品ID:</p>
    	<p>商品名称:</p>
    	<p>商品价格:</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
		  product:{},
		}
	},
	mounted(){
		//获取商品的索引值 -- id -- index
		//注意vue中传值时用的是不是?，如果是?就是用query方法获取值
		let index = this.$route.query.index;
		//
	},
}
</script>
  1. 在getters中写一个state作为方法实现获取商品信息的函数，然后在商品详细信息的组件中用这个方法获取商品信息
    只有getter才能实现异步操作

store - index.js

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	},//state结束
	getters:{
		//1.state自动代表当前store中的state内的全部状态
		//state作为属性使用--计算商品的件数
		getNumber(state){
			return state.products.length;
		},
		//2.state会自动注入到当前方法内部，无需传递参数，并且state自动代表store内当前全部状态
		getByIndex(state){
			return function(index){
				return state.products[index]; 
			}
		}
	},//getter结束
})

过程：用户点击某个商品的查看链接，链接跳转并提交了相应商品的index值，接口打开获取index值，通过getByIndex()方法，将store中的商品信息取出并返回
  1. 将获取到的商品详细信息赋给一个新的变量

products.vue

<template>
	<div>
		<h1>商品信息如下：</h1>
    	<p>商品ID:</p>
    	<p>商品名称:</p>
    	<p>商品价格:</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
		  product:{},
		}
	},
	mounted(){
		//获取商品的索引值 -- id -- index
		//注意vue中传值时用的是不是?，如果是?就是用query方法获取值
		let index = this.$route.query.index;
		//以方法的方式来调用getters
    	this.product = this.$store.getters.getByIndex(index);
	},
}
</script>
  1. 在输出详细信息时，引用新变量动态输出商品的各个详细信息

products.vue

<template>
	<div>
		<h1>商品信息如下：</h1>
    	<p>商品ID:{{ product.id }}</p>
    	<p>商品名称:{{ product.productName }}</p>
    	<p>商品价格:{{ product.salePrice }}</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
		  product:{},
		}
	},
	mounted(){
		//获取商品的索引值 -- id -- index
		//注意vue中传值时用的是不是?，如果是?就是用query方法获取值
		let index = this.$route.query.index;
		//以方法的方式来调用getters
    	this.product = this.$store.getters.getByIndex(index);
	},
}
</script>
  1. 在views下新建一个页面组件 (ChangeAge.vue 按钮 点击一次 年龄+1)

ChangeAge.vue

<template>
	<div>1234</div>
</template>
  1. 给新ChangeAge.vue组件添加路由

router-index.js

import Changeage from '../views/Changeage.vue'

const routes=[
	{
		path:'/changeage',
		component:Changeage
	}
]
  1. 输出一下state里的age

ChangeAge.vue

<template>
	<div>
		<h1>修改年龄</h1>
		<h1>当前的年龄是：{{this.$store.state.age}}</h1>
		<button>年龄增大</button>
	</div>
</template>
  1. 给按钮绑定事件，在脚本中(export default --> methods)写触发事件的方法

ChangeAge.vue

<template>
	<div>
		<h1>修改年龄</h1>
		<h1>当前的年龄是：{{this.$store.state.age}}</h1>
		<button @click="handle">年龄增大</button>
	</div>
</template>
  1. 因为修改store中的state只能提交mutation，所以在mutation中写触发事件方法，然后在ChangeAge.vue中调用方法

store - index.js

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	},//state结束
	getters:{
		//1.state自动代表当前store中的state内的全部状态
		//state作为属性使用--计算商品的件数
		getNumber(state){
			return state.products.length;
		},
		//2.state会自动注入到当前方法内部，无需传递参数，并且state自动代表store内当前全部状态
		getByIndex(state){
			return function(index){
				return state.products[index]; 
			}
		}
	},//getter结束
	//mutation开始
	mutations:{
		//state参数会自动注入，无需传参，且代表store内全部状态
		//触发年龄增加的事件方法
		addAgeMutation(state){
			state.age++;
		}
	},//mutations结束
})
  1. 在新组件中提交mutation，此时新组件和Access组件数据未连接，只要enter所有数据都刷新

ChangeAge.vue

<template>
	<div>
		<h1>修改年龄</h1>
		<h1>当前的年龄是：{{this.$store.state.age}}</h1>
		<button @click="handle">年龄增大</button>
	</div>
</template>
<script>
export default{
	methods:{
		handle(){
			this.$store.commit("addAgeMutation");
		};
	}
}
</script>
  1. 在app.vue父组件中写3个链接，就可以实现共享状态

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/access1">访问数据1</router-link> |
      <router-link to="/access2">访问数据2</router-link> |
      <router-link to="/changeage">修改年龄</router-link>
    </div>
  </div>
</template>
  1. 在views下添加一个新组件Addproduct.vue，导入页面组件路由，在app.vue中添加链接(新组建用来添加新商品及信息) 内容：输入内容表单和确认添加的按钮

Addproduct.vue

<template>
	<div>123</div>4
</template>

router-index.js

import Addproduct from '../views/Addproduct.vue';

const routes=[
	{
		path:'/addproduct',
		component:Addproduct
	}
];

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/access1">访问数据1</router-link> |
      <router-link to="/access2">访问数据2</router-link> |
      <router-link to="/changeage">修改年龄</router-link> |
      <router-link to="/addproduct">添加商品</router-link>
    </div>
    <router-view />
  </div>
</template>

Addproduct.vue

<template>
  <div>
    <h1>添加商品</h1>
    <p>输入商品ID：<input type="text" /></p>
    <p>输入商品名称：<input type="text"/></p>
    <p>输入商品售价：<input type="text"/></p>
    <p><button>确认添加</button></p>
  </div>
</template>
<script>
export default {
  data() {
  },
  methods: {
  }
};
</script>
  1. 给按钮添加事件，在新组件中对表单进行双向绑定，并在新组件内写脚本返回存储的数据，并写出按钮事件的方法

Addproduct.vue

<template>
  <div>
    <h1>添加商品</h1>
    <p>输入商品ID：<input type="text" v-model="id" /></p>
    <p>输入商品名称：<input type="text" v-model="productName" /></p>
    <p>输入商品售价：<input type="text" v-model="salePrice" /></p>
    <p><button @click="handle">确认添加</button></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 商品ID
      id: "",
      // 商品名称
      productName: "",
      // 商品价格
      salePrice: "",
    };
  },
  methods: {
    handle() {
    }
  },
};
</script>
  1. 提交新输入的商品信息用一个方法：appProductMutation(state,payload)

store - index.js

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	},//state结束
	getters:{
		//1.state自动代表当前store中的state内的全部状态
		//state作为属性使用--计算商品的件数
		getNumber(state){
			return state.products.length;
		},
		//2.state会自动注入到当前方法内部，无需传递参数，并且state自动代表store内当前全部状态
		getByIndex(state){
			return function(index){
				return state.products[index]; 
			}
		}
	},//getter结束
	//mutation开始
	mutations:{
		//state参数会自动注入，无需传参，且代表store内全部状态
		//触发年龄增加的事件方法
		addAgeMutation(state){
			state.age++;
		},
		//payload,译为载荷,就是其他的参数,可以为任意数据类型
		addProductMutation(state,payload){
			state.products.push(payload);
		}
	},//mutations结束
})
  1. 在新组件中的脚本中的按钮事件方法下调用appProductMutation()
    提交mutation时传参

Addproduct.vue

<template>
  <div>
    <h1>添加商品</h1>
    <p>输入商品ID：<input type="text" v-model="id" /></p>
    <p>输入商品名称：<input type="text" v-model="productName" /></p>
    <p>输入商品售价：<input type="text" v-model="salePrice" /></p>
    <p><button @click="handle">确认添加</button></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 商品ID
      id: "",
      // 商品名称
      productName: "",
      // 商品价格
      salePrice: "",
    };
  },
  methods: {
    handle() {
      //提交Vuex中的Mutation
      this.$store.commit("addProductMutation", obj);
    },
  },
};
</script>
  1. 将数据以对象的形式组织在一起，赋给新变量，然后提交mutation

Addproduct.vue

<template>
  <div>
    <h1>添加商品</h1>
    <p>输入商品ID：<input type="text" v-model="id" /></p>
    <p>输入商品名称：<input type="text" v-model="productName" /></p>
    <p>输入商品售价：<input type="text" v-model="salePrice" /></p>
    <p><button @click="handle">确认添加</button></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 商品ID
      id: "",
      // 商品名称
      productName: "",
      // 商品价格
      salePrice: "",
    };
  },
  methods: {
    handle() {
      //将数据以object形式组织在一起
      let obj = {
        id: this.id,
        productName: this.productName,
        salePrice: this.salePrice,
      };
      //提交Vuex中的Mutation
      this.$store.commit("addProductMutation", obj);
    },
  },
};
</script>
  1. 因为actions可以包含任意的异步操作，引入actions，actions通过mutation提交新值，然后mutation再修改state

store - index.js

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	},//state结束
	getters:{
		//1.state自动代表当前store中的state内的全部状态
		//state作为属性使用--计算商品的件数
		getNumber(state){
			return state.products.length;
		},
		//2.state会自动注入到当前方法内部，无需传递参数，并且state自动代表store内当前全部状态
		getByIndex(state){
			return function(index){
				return state.products[index]; 
			}
		}
	},//getter结束
	//mutation开始
	mutations:{
		//state参数会自动注入，无需传参，且代表store内全部状态
		//触发年龄增加的事件方法
		addAgeMutation(state){
			state.age++;
		},
		//payload,译为载荷,就是其他的参数,可以为任意数据类型
		addProductMutation(state,payload){
			state.products.push(payload);
		}
	},//mutations结束
	//actions开始
	actions:{

	},
})
  1. 发送AJAX将信息从WEB服务器请求回来，需要准备axios，服务器，并配置好axios – 在main.js中配置axios

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//引入axios模块
import axios from 'axios'
import qs from 'qs'
//配置axios
axios.defaults.baseURL = 'http://127.0.0.1:3000'
Vue.prototype.axios = axios;
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  1. index.js中先引入axios，异步请求时，不能this，直接axios.get(’/’).then(res=>{});接口前要加http://127.0.0.1:3000端口

store - index.js

import axios form 'axios';
//第三方组件直接导入

完整的store - index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';

Vue.use(Vuex)

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	},//state结束
	getters:{
		//1.state自动代表当前store中的state内的全部状态
		//state作为属性使用--计算商品的件数
		getNumber(state){
			return state.products.length;
		},
		//2.state会自动注入到当前方法内部，无需传递参数，并且state自动代表store内当前全部状态
		getByIndex(state){
			return function(index){
				return state.products[index]; 
			}
		}
	},//getter结束
	//mutation开始
	mutations:{
		//state参数会自动注入，无需传参，且代表store内全部状态
		//触发年龄增加的事件方法
		addAgeMutation(state){
			state.age++;
		},
		//payload,译为载荷,就是其他的参数,可以为任意数据类型
		addProductMutation(state,payload){
			state.products.push(payload);
		}
	},//mutations结束
	//actions开始
	actions:{
		axios.get('/');
	},
})
  1. 新建一个文件夹作为服务器文件夹，因为要发送HTTP服务，所以安装express模块

新建一个server服务器文件夹，安装express模块 npm install --save express

  1. 目前脚手架的地址是8080，自己的服务器端口是3000，一定会出现跨域问题
    安装cors 解决服务器和脚手架端口号不一致的问题

go npm install --save cors

  1. 打开server目录，创建一个app.js
  2. 加载express，cors模块，创建express实例，指定监听端口

server - App.js

//加载Express模块 -- 提供HTTP服务
const cors = require('cors');
//加载cors模块 -- 解决脚手架与服务器端口不一致造成的跨域
const { Server } = require('http');
//创建Express实例
const server = express();

//指定监听端口
server.listen(3000, () => {
    console.log('server is running...');
  })
  1. 解决跨域问题

App.js

const express = require('express');
//加载Express模块 -- 提供HTTP服务
const cors = require('cors');
//加载cors模块 -- 解决脚手架与服务器端口不一致造成的跨域
const Server= require('http');
//创建Express实例
const server = express();

//解决跨域问题
//用cors中间件
//cors中间件
server.use(cors({
    origin: ['http://127.0.0.1:8080', 'http://localhost:8080']
  }));

//指定监听端口
server.listen(3000, () => {
    console.log('server is running...');
  })
  1. app.js里创建接口(路由)

App.js

const express = require('express');
//加载Express模块 -- 提供HTTP服务
const cors = require('cors');
//加载cors模块 -- 解决脚手架与服务器端口不一致造成的跨域
const Server= require('http');
//创建Express实例
const server = express();

//解决跨域问题
//用cors中间件
//cors中间件
server.use(cors({
    origin: ['http://127.0.0.1:8080', 'http://localhost:8080']
  }));

//创建接口，接收商品数据
server.get('/getArticle',(req,res)=>{
	let object = {
		id:66,
		productName:"VIH 75 英寸液晶电视",
		salePrice:104279
	};
	res.send(object);
});

//指定监听端口
server.listen(3000, () => {
    console.log('server is running...');
  })
  1. actions下向WEB服务器发送异步请求(这里有一点点小问题)

store - index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';

Vue.use(Vuex)

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	},//state结束
	getters:{
		//1.state自动代表当前store中的state内的全部状态
		//state作为属性使用--计算商品的件数
		getNumber(state){
			return state.products.length;
		},
		//2.state会自动注入到当前方法内部，无需传递参数，并且state自动代表store内当前全部状态
		getByIndex(state){
			return function(index){
				return state.products[index]; 
			}
		}
	},//getter结束
	//mutation开始
	mutations:{
		//state参数会自动注入，无需传参，且代表store内全部状态
		//触发年龄增加的事件方法
		addAgeMutation(state){
			state.age++;
		},
		//payload,译为载荷,就是其他的参数,可以为任意数据类型
		addProductMutation(state,payload){
			state.products.push(payload);
		}
	},//mutations结束
	//actions开始
	actions:{
		getProducts(){
			//ajax请求到WEB服务器上获取点数据回来
			axios.get('http://127.0.0.1:3000/getArticle').then(res=>{
				console.log(res.data);
			});
		},
	},
})
  1. 创建一个新组件Serverdata.vue，导入页面组件路由，在app.vue中添加链接，在Serverdata.vue中添加按钮

Serverdata.vue

<template>
	<div>1234</div>
</template>

router - index.js

import Serverdata form '../views/Serverdata.vue'

const routes = [
	{
		path:'/serverdata',
		component:Serverdata
	}
]
  1. 在Serverdata.vue中写脚本，在methods中给按钮写事件方法，分发actions

Serverdata.vue

<template>
  <div>
    <button @click="getData">获取服务器数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    getData() {
      //分发Vuex中的Actions
      this.$store.dispatch("getProducts");
    },
  },
};
</script>
  1. context表示所有的state，getter，mutation，actions，所以actions中通过mutation添加新值时，context相当于state,在actions中通过提交mutations来异步获取到的数据

store - index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';

Vue.use(Vuex)

export default new Vuex.Store({
		//存储组件中共享的状态
		state:{
		//表示用户名
		username:'Tom',
		//表示年龄
		age:23,
		//表示性别 t男f女
		sex:true,
		//表示商品数量
		products:[
			{
        		id: 1,
        		productName: '海信（Hisense）60E3F 65英寸 4K超高清',
        		salePrice: 2969
      		},
      		{
        		id: 2,
        		productName: '海信（Hisense）60E3F 60英寸 4K超高清',
	       		salePrice: 1969
      		},
      		{
        		id: 3,
        		productName: '海信 VIDAA 43V1F-R 43英寸 全高清 海信',
        		salePrice: 1049
      		},
      		{
        		id: 4,
        		productName: 'JBI 4k智能网络75 英寸液晶电视机85 90',
        		salePrice: 12999
      		}
		]
	},//state结束
	getters:{
		//1.state自动代表当前store中的state内的全部状态
		//state作为属性使用--计算商品的件数
		getNumber(state){
			return state.products.length;
		},
		//2.state会自动注入到当前方法内部，无需传递参数，并且state自动代表store内当前全部状态
		getByIndex(state){
			return function(index){
				return state.products[index]; 
			}
		}
	},//getter结束
	//mutation开始
	mutations:{
		//state参数会自动注入，无需传参，且代表store内全部状态
		//触发年龄增加的事件方法
		addAgeMutation(state){
			state.age++;
		},
		//payload,译为载荷,就是其他的参数,可以为任意数据类型
		addProductMutation(state,payload){
			state.products.push(payload);
		}
	},//mutations结束
	//actions开始
	actions:{
		getProducts(context){
			//ajax请求到WEB服务器上获取点数据回来
			axios.get('http://127.0.0.1:3000/getArticle').then(res=>{
				//提交mutation
				context.commit('addProductMutation',res.data);
			});
		},
	},
})
  1. 所有步骤完成之后，刷新一次，数据就消失了，所以vuex需要和webStorage一起使用
畏旧
关注
专栏目录
Vue全家桶之Vuex实例代码
12-27
Vuex的详细的标准实例代码，学习Vuex必备源码，附加详细讲解。请参考博客主页找到Vuex的博文：https://blog.csdn.net/qq_41647999
Vuex完整示例代码
wang_xiao_ye的博客
05-31 952
Vuex完整示例代码
一篇搞定Vuex(含代码示例)
技术圈
10-26 291
vue通信总结 父对子：v-bind 子对父：v-on 兄弟组件之间：EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件 Vuex是实现组件全局状态管理的一种机制，可以方便的实现组件数据共享。 使用全局store管理 Vuex 统一状态管理 数据集中管理，易于开发和后期维护 高效实现数据共享，提高开发效率 存储vuex中的数据是响应式的，能够实时保持数据与页面的同步 Vuex基础使用 构建store.js import Vue from 'vue' import Vuex from
vuex代码编写
weixin_41415820的博客
01-13 198
1. vue create 中加上vuex 2. vue-cli脚手架生成后， main.js如下： importVuefrom'vue' importAppfrom'./App.vue' importstorefrom'./store' Vue.config.productionTip=false newVue({ store, ren...
vue2中vuex实际操作例子
零-J
11-04 283
vuex实际操作例子提示：以下是本篇文章正文内容，下面案例可供参考。
vuex 使用步骤代码
09-08
以下是对 Vuex 的使用步骤和相关知识点的详细说明： 1. **安装**： 在项目中使用 Vuex，首先需要通过 npm 或 yarn 安装它： ```bash npm install vuex # 或 yarn add vuex ``` 2. **创建 store**： 在项目...
mpvue+vuex搭建小程序详细教程(完整步骤)
10-17
本篇教程将详细介绍如何使用mpvue结合Vuex搭建小程序的完整步骤，为有意在小程序开发领域深造的读者提供参考。 ### mpvue介绍 mpvue是一款使用Vue.js开发小程序的前端框架，它将Vue.js的核心库与微信小程序的开发...
Vue.js渐进式Vuex教程：实例代码与模块化实践
本文是一篇详细的Vue.js与Vuex渐进式教程，旨在帮助读者从基础入门到逐步掌握更高级的使用技巧。Vuex是Vue.js推荐的状态管理模式，它使得在单页面应用中管理复杂状态变得简单且可预测。 首先，我们了解Vuex的基本...
vue.js中引入vuex储存接口数据及调用的详细流程
10-18
**引入Vuex储存接口数据及调用的详细流程** 1. **安装Vuex**：首先，需要使用npm安装Vuex库，命令如下： ``` npm install vuex --save ``` 如果在国内使用npm较慢，建议使用淘宝的镜像（cnpm）进行安装。 2....
Vuex 使用及简单实例(计数器)
12-07
1. 安装 Vuex：首先，你需要通过 npm 包管理工具安装 Vuex。在终端中运行 `npm install vuex --save`。`--save` 参数是为了将 Vuex 添加到项目的 package.json 文件中，以便在生产环境中使用。 2. 创建 Store：在...
vuex的学习代码（完整）
07-31
# app > A Vue.js project ## Build Setup ``` bash # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report ``` For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
简单的vuex 的使用案例笔记
08-27
主要介绍了简单的vuex 的使用案例笔记,本文通过demo 是一个 改变 app 的模式 的一个appellation ，选择是 夜间模式还是白天模式，具体代码大家参考下本
vuex代码笔记
u011266694的专栏
10-22 163
store.js文件： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({ state: { size: 5 }, mutations: { //同步执行 add: function (state,pa...
vuex 源代码简析
07-13 375
说明 以下内容均是以 Vuex 2.0.0 版本展开分析。 此篇文章，是自己对 Vuex 实现分析的记录性文章，如有任何错误，欢迎指正交流。 Vuex 示意图 在说之前先来看一张官方文档提供的一张图 首先组件渲染依赖了部分全局的 State 内部预先定义的属性。 组件内部需要更新之前依赖的 State 内部属性，则需要调度（Dispatch）触发 Action 响应状态变化（也可直接提交 muta...
Vue简单实例——Vuex代码实现
最新发布
hssjsh的博客
11-20 539
Vue简单案例——vuex的基本使用
简易版vuex源码
七月
07-15 157
实现一个插件：挂载 $store 实现store 以下是实现的一份简易版 vuex 源码： // 一、缓存Vue构造函数 let Vue; // 二、核心：声明一个Store类 class Store { constructor(options) { //访问state方法：this.$store.state.xxx this._vm = new Vue ({ // Vue会把data里的数据变为响应式， .
【Vue基础】Vuex全局管理的基本代码结构及其使用
一个普通人的博客
10-03 518
Getter用于对 store 中的数据进行加工处理后形成新的数据，类似 Vue 中的计算属性。①Vuex中应该通过mutation变更state中的数据，而不是直接操作state中的数据。②通过 mapGetters 函数将需要的 getter 映射为当前组件的。②通过 mapState 函数，将当前组件需要的全局数据映射为当前组件的。②通过这种方式虽然操作起来繁琐一些，但是可以集中监控所有数据的变化。所有共享的数据都要统一放在Store的 state 中进行存储；
vuex搭建过程以及项目结构
m0_45899013的博客
06-19 270
概念 vuex是专为vue.js应用程序开发的状态管理模式（提供了可共用的参数），主要采用的是集中式存储管理应用的所有组件状态（响应式） 主要应用场景 多个视图依赖于同一状态 来自不同视图的行为需要变更同一状态 vuex核心概念 state：数据仓库，驱动应用的数据源。 mutations：提供修改数据仓库的方法。（同步的） getters：提供获取仓库内容的方法。 actions：提供了异步操作，基于mutations来进行操作。 项目操作 1.如果要在项目中使用vuex的话，在当前目录下安装vuex：
POST http://127.0.0.1:3000/login net::ERR_CONNECTION_RESE
热门推荐
Janner668的博客
03-17 2万+
解决vue项目报错 POST http://127.0.0.1:3000/login net::ERR_CONNECTION_RESET 通过报错可得知，发送post请求时，服务器端的接口/login拒绝连接 我的错： 在发送请求时，服务器端连接断开了 因为服务器端报错 throw err; // Rethrow non-MySQL errors 显示错误是,results未定义 检查了我的代码，发现 app.psot('/login',(req,res)=>{ let uname=req.bod
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值