vue 之 关于vuex的一个小demo 、vuex、state、getters、mutations、actions

实现效果：

准备环境：
vue-cli :

如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载

安装vue cli3.0+：npm install -g @vue/cli

查看版本：vue --version

创建项目：vue create Productsale

vuex:

vuex 安装： vue add vuex

npm install -save vuex

vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。

vuex主要由五部分组成：state、getters、mutation、action、mudle组成。

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'
import ProductListTwo from './components/ProductListTwo'
export default {
    
  name: 'app',
  components: {
    
    'product-list-one': ProductListOne,
    'product-list-two': ProductListTwo
  },
  data () {
    
    return {
    }
  }
}
</script>
<style lang="less">
body {
    
  font-family: Ubuntu;
}
</style>

ProductListOne.vue

<template>
  <div class="product-list-one">
    <h2>Product List One</h2>
    <ul>
      <li v-for="(item,index) in saleProducts"
          :key=