Vuex(1)实例的详细代码及步骤
作者：互联网
Vuex(1)实例的详细代码及步骤
- 使用脚手架，自己创建或者使用现成的，我使用的是现成的脚手架
若创建脚手架，在cmd命令行中操作
npm create 新建项目名
[详细安装脚手架步骤指路->](https://blog.csdn.net/Janner668/article/details/113932309)
- store中的index.js是用来保存数据(应用程序)的，在store存储数据
store - index.js
export default new Vuex.Store({
//存储组件中共享的状态
state: {
}
})
- 在views文件目录下，创建2个vue文件 Access1 Access2
Access1.vue —— 用来访问所有数据
<template>
<div>1234</div>
</template>
Access2.vue
<template>
<div>1234</div>
</template>
- 在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
}
]
- 在继承终端打开vue文件检查，命令时npm run serve
终端
npm run serve
- 给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,
}
})
- 在组件中访问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>
- 在脚本中添加新的商品信息，用数组保存数据信息
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
}
]
}
})
- 循环遍历输出商品信息内容
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>
- 存储组件中共享的状态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结束
})
- 输出时，带入组件中共享的状态{{}}
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>
- 在每个商品信息的后边加链接 点击链接即可查看商品的详细信息
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>
- 在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
}
];
- 输出时，取出商品的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>
- 在商品详细信息插件中写脚本，获取被点击商品的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>
- 在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中的商品信息取出并返回
- 将获取到的商品详细信息赋给一个新的变量
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>
- 在输出详细信息时，引用新变量动态输出商品的各个详细信息
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>
- 在views下新建一个页面组件 (ChangeAge.vue 按钮 点击一次 年龄+1)
ChangeAge.vue
<template>
<div>1234</div>
</template>
- 给新ChangeAge.vue组件添加路由
router-index.js
import Changeage from '../views/Changeage.vue'
const routes=[
{
path:'/changeage',
component:Changeage
}
]
- 输出一下state里的age
ChangeAge.vue
<template>
<div>
<h1>修改年龄</h1>
<h1>当前的年龄是：{{this.$store.state.age}}</h1>
<button>年龄增大</button>
</div>
</template>
- 给按钮绑定事件，在脚本中(export default --> methods)写触发事件的方法
ChangeAge.vue
<template>
<div>
<h1>修改年龄</h1>
<h1>当前的年龄是：{{this.$store.state.age}}</h1>
<button @click="handle">年龄增大</button>
</div>
</template>
- 因为修改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结束
})
- 在新组件中提交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>
- 在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>
- 在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>
- 给按钮添加事件，在新组件中对表单进行双向绑定，并在新组件内写脚本返回存储的数据，并写出按钮事件的方法
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>
- 提交新输入的商品信息用一个方法：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结束
})
- 在新组件中的脚本中的按钮事件方法下调用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>
- 将数据以对象的形式组织在一起，赋给新变量，然后提交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>
- 因为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:{
},
})
- 发送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')
- 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('/');
},
})
- 新建一个文件夹作为服务器文件夹，因为要发送HTTP服务，所以安装express模块
新建一个server服务器文件夹，安装express模块 npm install --save express
- 目前脚手架的地址是8080，自己的服务器端口是3000，一定会出现跨域问题
安装cors 解决服务器和脚手架端口号不一致的问题
go npm install --save cors
- 打开server目录，创建一个app.js
- 加载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...');
})
- 解决跨域问题
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...');
})
- 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...');
})
- 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);
});
},
},
})
- 创建一个新组件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
}
]
- 在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>
- 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);
});
},
},
})
- 所有步骤完成之后，刷新一次，数据就消失了，所以vuex需要和webStorage一起使用
标签：index,vue,步骤,productName,state,实例,Vuex,id,store 来源： https://blog.csdn.net/Janner668/article/details/113931887