Vuex的简单使用，基于Vue2

模仿他的，项目地址

https://github.com/iamshaunjp/vuex-playlist

视频地址

https://www.youtube.com/watch?v=BGAu__J4xoc&list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2&index=1

 

 

 

 

 

 

要先安装nodejs，可以自行百度

 

第一步。我们先弄个vue-cli,因为这个项目是用vue2来弄的，所以我指定了版本号，这个项目目前是5年前的了，如果不指定版本号，可能你会安装到vue3默认版了，为了和上面的视频一直，我还是指定版本号了。

 npm install -g @vue/cli@3.3.0

如果你以前有装的话可以 先卸载 

npm uninstall -g @vue/cli

 

第二步

vue init webpack-simple vuex-playlist

 

第三步

他提示我要  npm i -g @vue/cli-init，如果你没有这个提示就不管他，如果有就先解决再

vue init webpack-simple vuex-playlist

 

 

 

第四步，一直回车

 

 

 第五步，执行到npm run dev，会自动打开浏览器，显示http://localhost:8080/的

cd vuex-playlist
npm install
npm run dev

 

第六步

安装vuex，因为是vue2版本，安装也是指定的

npm install vuex@2.3.1 --save

 

 

第七步，新建component和store文件夹。里面对应的ProductListOne.vue ,ProductListTwo.vue  和 store.js 文件

 

 

ProductListOne.vue 文件

<template>
    <div id="product-list-one">
        <h2>Product List One</h2>
        <ul>
            <li v-for="(product,index) in saleProducts" :key="index">
               <span class="name">{{product.name}}</span>
               <span class="price">${{product.price}}</span>
            </li>
        </ul>
        <button v-on:click="reducePrice(4)">Reduce Price</button>
    </div>
  </template>
  
  <script>
import { mapActions } from 'vuex';
import { mapGetters } from 'vuex';
  export default {
    computed:{
        products(){
            return this.$store.state.products;
        },
        // saleProducts(){
        //     return this.$store.getters.saleProducts
        // }
        ...mapGetters([
            'saleProducts'
        ])
    },
    methods:{
        // reducePrice(amount){
            // this.$store.commit('reducePrice');
            // this.$store.state.products.forEach(product=>{
            //     product.price -=1;
            // })
            // this.$store.dispatch('reducePrice',amount)
        // }
        ...mapActions([
                'reducePrice'
            ])
    }
  }
  </script>
  
  <style scoped>
  #product-list-one{
      background: #FFF8B1;
      box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
      margin-bottom: 30px;
      padding: 10px 20px;
  }
  #product-list-one ul{
      padding: 0;
  }
  #product-list-one li{
      display: inline-block;
      margin-right: 10px;
      margin-top: 10px;
      padding: 20px;
      background: rgba(255,255,255,0.7);
  }
  .price{
      font-weight: bold;
      color: #E8800C;
  }
  </style>
  

 

ProductListTwo.vue 文件

<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="(product,index) in saleProducts" :key="index">
               <span class="name">{{product.name}}</span>
               <span class="price">${{product.price}}</span>
            </li>
        </ul>
    </div>
  </template>
  
  <script>
  export default {
    computed:{
        products(){
            return this.$store.state.products;
        },
        saleProducts(){
           return this.$store.getters.saleProducts
        }
    },
  }
  </script>
  
  <style scoped>
  #product-list-two{
      background: #D1E4FF;
      box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
      margin-bottom: 30px;
      padding: 10px 20px;
  }
  #product-list-two ul{
      padding: 0;
      list-style-type: none;
  }
  #product-list-two li{
      margin-right: 10px;
      margin-top: 10px;
      padding: 20px;
      background: rgba(255,255,255,0.7);
  }
  .price{
      font-weight: bold;
      color: #860CE8;
      display: block;
  }
  </style>
  

 

 

store.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export const store = new Vuex.Store({
    strict:true,
    state:{
        products:[
            {name:'Banana Skin',price:20},
            {name:'Shiny Star',price:40},
            {name:'Green Shells',price:60},
            {name:'Red Shells',price:80},
          ]
    },
    getters:{
        saleProducts:state=>{
            var saleProducts=state.products.map(product=>{
                return {
                    name:'**'+product.name+'**',
                    price:product.price/2,
                }
            })
            return saleProducts
        }
    },
    mutations:{
        reducePrice:(state,payload)=>{
            state.products.forEach(product=>{
                product.price -=payload;
            })
        }
    },
    actions:{
        reducePrice:(context,payload)=>{
            setTimeout(function(){
                context.commit('reducePrice',payload)
            },2000)
        }
    }
})

 

 

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',
  data () {
    return {
      
    }
  },
  components:{
    ProductListOne,
    ProductListTwo
  }
}
</script>

<style>

</style>

 

 

main.js 文件

import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store'

new Vue({
  store:store,
  el: '#app',
  render: h => h(App)
})

 

 

package.json 文件，这个文件你不要全部复制我的，主要看他们的版本号的

{
  "name": "y",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "竹子 <2672036296@qq.com>",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11",
    "vuex": "^2.3.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

留意他们的版本号是否正确

建议看视频学习，那个博主讲得实在太好了

 

 

最后你会发现改一个页面的数据，其他页面的数据也会改变，不需要通过父子组件这样传递值，

那么这样就可以很好管理所有页面的一些共同数据了