vuex使用前与使用后的写法---state搭建vuex中央状态管理

项目搭建完成后，

不使用vuex

src文件夹里：
App.vue:

<template>
  <div id="app">
    <product-list-one v-bind:products="products"></product-list-one>  // 通过v-bind绑定数据
    <product-list-two v-bind:products="products"></product-list-two>    
  </div>
</template>

<script>
import productListOne from './components/productListOne'
import productListTwo from './components/productListTwo'
export default {
  name: 'app',
  components: {
    'product-list-one': productListOne,
    'product-list-two': productListTwo,    
  },
  data () {    // 数据放在data里
    return {
      products:[
        {name:"马云",price:200},
        {name:"马化腾",price:140},
        {name:"马冬梅",price:20},        
        {name:"马蓉",price:10},                          
      ]
    }
  }
}
</script>

<style>
  body{
    font-family: Ubuntu;
    color:#555;
  }
</style>

组件1：productListOne.vue

<template>
  <div id="product-list-one">
    <h2>Product-List-One</h2>
    <ul>
      <li v-for="product in products">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>        
      </li>
    </ul> 
  </div>
</template>

<script>
export default {
  props:["products"],  //  通过props属性接收父组件传递的数据
  data () {
    return {
      
    }
  }
}
</script>

<style>
  #product-list-one {
        background: #fff881;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
        margin-top: 30px;
        padding: 10px 20px;
    }
    #product-list-one ul {
        padding: 0;
    }
    #product-list-one ul li {
        margin-right: 10x;
        margin-top: 10px;
        padding: 20px;
        background: rgba(255,255,255,0.7);
    }
    .price{
        font-weight: bold;
        color: #e8800c;
        display: block;
    }
</style>

组件2：productListTwo.vue

<template>
  <div id="product-list-two">
    <h2>Product-List-Two</h2>
    <ul>
      <li v-for="product in products">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>        
      </li>
    </ul> 
  </div>
</template>

<script>
export default {
  props:["products"], //  通过props属性接收父组件传递的数据
  data () {
    return {
      
    }
  }
}
</script>

<style scoped>
    #product-list-two {
        background: #d1e4ff;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
        margin-top: 30px;
        padding: 10px 20px;
    }
    #product-list-two ul {
        padding: 0;
        list-style-type: none;
    }
    #product-list-two ul li {
        margin-right: 10x;
        margin-top: 10px;
        padding: 20px;
        background: rgba(255,255,255,0.7);
    }
    .price{
        font-weight: bold;
        color: #860ce8;
        display: block;
    }
</style>

vuex使用后

src文件夹下新建state文件夹，并新建state.js文件，将原App.vue里的data，放在state.js里

state.js

import Vue from 'vue'
import Vuex from 'vuex'

// 通过use让vue使用vuex
Vue.use(Vuex)

// 设定store,必须通过export暴露出去
export const store = new Vuex.Store({
    state: {
        products:[
            {name:"马云",price:200},
            {name:"马化腾",price:140},
            {name:"马冬梅",price:20},        
            {name:"马蓉",price:10},                          
          ]
    }
})

main.js文件中引入store

import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store'  // 引入
new Vue({
  store:store,  // 引入
  el: '#app',
  render: h => h(App)
})

App.vue文件里的data数据删除，template里的组件不再需要v-bind绑定数据，

<template>
  <div id="app">
    <product-list-one></product-list-one>  // 不需要v-bind绑定
    <product-list-two></product-list-two>    // 不再需要v-bind绑定
  </div>
</template>

<script>
import productListOne from './components/productListOne'
import productListTwo from './components/productListTwo'
export default {
  name: 'app',
  components: {
    'product-list-one': productListOne,
    'product-list-two': productListTwo,    
  },
  data () {
    return {
      // products:[
      //   {name:"马云",price:200},
      //   {name:"马化腾",price:140},
      //   {name:"马冬梅",price:20},        
      //   {name:"马蓉",price:10},                          
      // ]
    }
  }
}
</script>

<style>
  body{
    font-family: Ubuntu;
    color:#555;
  }
</style>

子组件里不需要再通过props属性传值
而是通过调用方法获取store.js里的数据

productListOne.vue

<template>
  <div id="product-list-one">
    <h2>Product-List-One</h2>
    <ul>
      <li v-for="product in products">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>        
      </li>
    </ul> 
  </div>
</template>

<script>
export default {
  // props:["products"],
  // data () {
  //   return {
      
  //   }
  // }

  // 通过调用方法获取store.js里的数据
  computed: {
    products() {
      return this.$store.state.products
    }
  }
}
</script>

<style>
  #product-list-one {
        background: #fff881;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
        margin-top: 30px;
        padding: 10px 20px;
    }
    #product-list-one ul {
        padding: 0;
    }
    #product-list-one ul li {
        margin-right: 10x;
        margin-top: 10px;
        padding: 20px;
        background: rgba(255,255,255,0.7);
    }
    .price{
        font-weight: bold;
        color: #e8800c;
        display: block;
    }
</style>