vuex的简单使用逻辑

使用vuex示例：
1.创建两个组件分别是ProductListOne.vue,ProductListTwo.vue
2.创建一个store.js文件。这个就是共享数据的存储文件
文件中的内容：
--------------------------------------------
import Vue from 'vue'
import Vuex from 'vuex'
// 通过vue使用我们的中间件Vuex
Vue.use(Vuex)
// 通过添加export表明这个store是能被外部使用的
export const store = new Vuex.Store({
	state:{
		products:[
			{name:'马云',price:200},
			{name:'张绍刚',price:180},
			{name:'赵丽颖',price:150},
			{name:'王思聪',pirce:190}
		]
	}
});
--------------------------------------------
3.因为我们所有的文件都要经过main.js文件所以我们需要在main.js文件中引入这个store.js
中的内容
--------------------------------------------
import Vue from 'vue'
import App from './App.vue'
// 引入store文件。不添加后缀默认是store.js文件
import  {store} from './store/store'
new Vue({
  // 在实例化根类中这么进行书写
  store:store,
  el: '#app',
  render: h => h(App)
})
--------------------------------------------
4.在两个组件中代码
<template>
  <div id="product-list-one">
   	<h2>第1个组件</h2>
   	<li v-for="product in products">
   		<span>{{product.name}}</span>
   	</li>
  </div>
</template>
<script>
export default {
 	computed:{
 		products(){
 			return this.$store.state.products;
 		}
 	}
}
</script>

<style>

</style>
5.我们在app.vue中进行声明子组件
<template>
  <div id="app">
      <product-list-one></product-list-one>
      <product-list-two></product-list-two>
  </div>
</template>

<script>
import ProductListOne from './components/ProductListOne.vue'
import ProductListTwo from './components/ProductListTwo.vue'
export default {
  name: 'app',
  components:{
    'product-list-one':ProductListOne,
    'product-list-two':ProductListTwo,
  },
  data () {
    return {
        
    }
  }
}
</script>

<style>

</style>

效果：