标签：目录 传递 状态 item main state port ble 电动
vuex中的store是一个状态管理器，用于分发数据。相当于父组件数据传递给子组件。
1.安装vuex
npm i vuex --save
2.在src目录中创建store文件夹，里面创建store.js
（1）store.js里引入vue和Vuex，
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex)
（2）创建并导出store对象
export const store = new Vuex.Store({ })
（3）在store对象中创建数据
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) export const store = new Vuex.Store({ state:{ product:[ {name:"自行车",price:120}, {name:"电动车",price:200}, {name:"出租车",price:300}, {name:"大货车",price:444}, ] } })
3.在main.js中引入store
import Vue from ‘vue‘ import App from ‘./App‘ import {store} from ‘../src/store/store‘ // 引入store Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app‘, store, // 这里写这里 components: { App }, template: ‘<App/>‘ })
4.在子组件中使用computed获得store里的数据
<template>
<div>
<p>one</p>
<table border="1">
<tr>
<th>产品名称</th>
<th>产品价格</th>
</tr>
<tr v-for="(item,i) in getProduct">
<td>{{item.name}}</td>
<td>${{item.price}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "One",
data () {
return {
};
},
computed:{
getProduct(){
// this.$tore.state.xxx
return this.$store.state.product;
}
}
}
</script>
<style lang="css" scoped>
table{
width: 200px;
height: 100px;
border-collapse: collapse;
}
</style>
标签：目录 传递 状态 item main state port ble 电动
原文地址：https://www.cnblogs.com/luguankun/p/10759638.html
