vuex零基础使用入门

本文介绍了vue-x的基本用法，案例参考The Net Ninja的youtube视频。如有不足，请多指教。同样学习之前需要您已经掌握vue和es6的基本用法。

创建一个项目

首先需要安装vue-cli创建vue和vuex的运行环境

我们要创建什么项目？

我们需要创建的是两个商品列表，分别展示各自的商品名称和价格。并且具备更改价格的方法。

用vue进行内容创建

首先我们先用vue进行内容创建，我们应当有两个商品列表，所以创建了ProductListOne和ProductListTwo两个组件。

既然是vue的创建方式，所以我们首先用的传值方式还是props。先把所有数据放在父组件App.vue中，再通过props传递给子组件。

//App.vue
<template>
  <div id="app">
    <product-list-one :products="products"></product-list-one>
    <product-list-two :products="products"></product-list-two>
  </div>
</template>

<script>
  import ProductListOne from './components/ProductListOne.vue'
  import ProductListTwo from './components/ProductListTwo.vue'

  export default{
    components: {
        'product-list-one':ProductListOne,
        'product-list-two':ProductListTwo
    },
    name: 'app',
    data(){
      return {
        products: [
          {name: 'Banana Skin', price: 20},
          {name: 'Shiny Star', price: 40},
          {name: 'Green Shells', price: 60},
          {name: 'Red Shells', price: 80}
        ]
      }
    }

  }
</script>

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

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

<style>
</style>

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

    </div>
</template>

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

<style >

</style>

预览截图

central Store

接下来我们看看用vuex怎么管理我们的数据。

  1. 首先我们需要安装vuex
npm install --save-dev vuex

  1. 创建store/index.js

  2. 把App.vue的数据移到index.js

//App.vue
<template>
  <div id="app">
    <product-list-one :products="products"></product-list-one>
    <product-list-two :products="products"></product-list-two>
  </div>
</template>

<script>
  import ProductListOne from './components/ProductListOne.vue'
  import ProductListTwo from './components/ProductListTwo.vue'

  export default{
    components: {
        'product-list-one':ProductListOne,
        'product-list-two':ProductListTwo
    },
    name: 'app',
    data(){
      return {
      }
    }

  }
</script>

//store/index.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex) // 不写这句话浏览器控制台就会报错，于是我就写了

export const store = new Vuex.Store({
  state: {
    products: [
      {name: 'Banana Skin', price: 20},
      {name: 'Shiny Star', price: 40},
      {name: 'Green Shells', price: 60},
      {name: 'Red Shells', price: 80}
    ]
  }
})

//修改main.js
import Vue from 'vue'
import App from './App.vue'
import {store} from './store/index.js'

/* eslint-disable no-new */
new Vue({
  store:store,
  el: '#app',
  render: h=>h(App)
})

//ProductListOne
<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 {
      //getCentral store,use computed attribute
    //when we call products,we use the computed method products that return the products in the store's state
    computed:{
      products(){
          return this.$store.state.products;
      }
    }
  }
</script>

//ProductListTwo
<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 {
    //getCentral store,use computed attribute
    //when we call products,we use the computed method products that return the products in the store's state
    computed:{
      products(){
        return this.$store.state.products;
      }
    }
  }
</script>

预览

Getters

假设一个需求，我们需要对上架的商品进行打折处理。就是我们上述的改变价格的方法。

我们可以使用computed来处理products，新建一个saleProducts变量，作为处理后的值。

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

<script>
  export default {
    //getCentral store,use computed attribute
    //when we call products,we use the computed method products that return the products in the store's state
    computed: {
      products(){
        return this.$store.state.products;
      },
      saleProducts(){
        var saleProducts = this.$store.state.products.map((product) => {
          return {
            name: '**' + product.name + '**',
            price: product.price / 2
          }
        })
        return saleProducts;
      }
    }
  }
</script>

预览：

注意ProductListTwo我们没有处理

如果我们想要这种saleProducts也利用在其他地方呢？

不可能每个组件都复制这个函数吧

所以我们可以把它作为store的一个getter，output在我们需要的地方

//store/index.js

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

Vue.use(Vuex) // 不写这句话浏览器控制台就会报错，于是我就写了

export const store = new Vuex.Store({
  state: {
    products: [
      {name: 'Banana Skin', price: 20},
      {name: 'Shiny Star', price: 40},
      {name: 'Green Shells', price: 60},
      {name: 'Red Shells', price: 80}
    ]
  },
  //由于我们在store里，所以不用写this.$store，直接把state传进去就ok了
  getters:{
    saleProducts:state=>{
      var saleProducts = state.products.map((product) => {
        return {
          name: '**' + product.name + '**',
          price: product.price / 2
        }
      })
      return saleProducts;
    }
  }
})

而在组件中，直接调用this.$store.getters.saleProducts就可以了。

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

<script>
  export default {
    //getCentral store,use computed attribute
    //when we call products,we use the computed method products that return the products in the store's state
    computed: {
      products(){
        return this.$store.state.products;
      },
      saleProducts(){
          return this.$store.getters.saleProducts
      }
    }
  }
</script>

预览

注意ProductListTwo没有更改


Mutations

how to change the state in the store?

假设我们需要点击来改变价格。
我们首先想到的是创建一个按钮，点击时触发method来改变this.$store.product。
来试试看是否可行。

//ProductListOne
<template>
  <div id="product-list-one">
    <h2>Product List One</h2>
    <ul>
      <li v-for="product in saleProducts">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>
      </li>
    </ul>
    <button @click="reducePrice">Reduce Price</button>
  </div>
</template>

<script>
  export default {
    //getCentral store,use computed attribute
    //when we call products,we use the computed method products that return the products in the store's state
    computed: {
      products(){
        return this.$store.state.products;
      },
      saleProducts(){
          return this.$store.getters.saleProducts
      }
    },
    methods:{
        reducePrice:function () {
          this.$store.state.products.forEach(product=>{
              product.price -= 1;
          })
        }
    }
  }
</script>

注意：如果在index.js的state前加use:strict,表示使用严格模式，那么这样直接修改state是不允许的（只能通过mutation修改）

预览

虽然是可以更改了，但是有一个问题，就是我们不知道是谁改变了state，我们现在自己写当然知道，要是从外部看似乎看不出来。

所以我们需要用mutation，可以追踪变化发生的源头。

这就是mutation的作用，可以让我们追溯数据更改的源头，并且在vue dev-tool中可以看到。

cool，所以我们在store/index.js中创建这个mutations（可能有多个mutation，所以这里是复数）

注意
由于我们在index.js中操作，所以不需要写this.$store了，需要state时，直接写state。

//store/index.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex) // 不写这句话浏览器控制台就会报错，于是我就写了

export const store = new Vuex.Store({
  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可以通过vue-devtool进行跟踪
  mutations: {
    reducePrice: state => {
      state.products.forEach(product => {
        product.price -= 1;
      })
    }
  }
})

子组件如何调用呢？就是commit方法。直接commit('mutation'),
mutation就是我们具体在index.js里创建的mutation名称。

//ProductListOne
<template>
  <div id="product-list-one">
    <h2>Product List One</h2>
    <ul>
      <li v-for="product in saleProducts">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>
      </li>
    </ul>
    <button @click="reducePrice">Reduce Price</button>
  </div>
</template>

<script>
  export default {
    computed: {
      products(){
        return this.$store.state.products;
      },
      saleProducts(){
          return this.$store.getters.saleProducts
      }
    },
    methods:{
        reducePrice:function () {
          this.$store.commit('reducePrice')
          //reducePrice是我们定义在store里的mutations里的方法，要用commit触发
        }
    }
  }
</script>

预览

Actions

使用mutations时有一个问题需要注意，就是不要直接使用异步，比如从服务器加载数据.

我们把index.js的mutation更改一下，用setTimeout来模拟异步.看看会发生什么事。

 mutations: {
    reducePrice: state => {
      setTimeout(function () {
        state.products.forEach(product => {
            product.price -= 1;
          }
        )
      },3000)
    }
  }

预览

解决办法就是使用actions，可以拦截到达mutation的指令

1.建立一个actions，把异步获取的方法放在actions

//index.js
  mutations: {
    reducePrice: state => {
      state.products.forEach(product => {
        product.price -= 1;
      })
    }
  },
  actions:{
    //context是上下文，这里类似store
    reducePrice:context=>{
      setTimeout(function () {
        context.commit('reducePrice')
      },2000)
    }
  }

2.组件不直接触发mutation,而是通过dispatch一个action，让action来触发mutation，这样数据到来后，mutation才会被触发，我们也就可以实时看到变化。

//ProductListOne
<template>
  <div id="product-list-one">
    <h2>Product List One</h2>
    <ul>
      <li v-for="product in saleProducts">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>
      </li>
    </ul>
    <button @click="reducePrice">Reduce Price</button>
  </div>
</template>

<script>
  export default {
    computed: {
      products(){
        return this.$store.state.products;
      },
      saleProducts(){
          return this.$store.getters.saleProducts
      }
    },
    methods:{
        reducePrice:function () {
          this.$store.dispatch('reducePrice')
        }
    }
  }
</script>

3.预览

假设我们每次减价时，不是固定的值，那么我们就需要一个payload，作为参数传递。

1.我们需要在click的时候直接传入这个参数，比如是4，所以我们先在button这里改

//ProductListOne.js
 <button @click="reducePrice(4)">Reduce Price</button>

2.既然这个reducePrice触发的是dispatch，我们dispatch也要改。

实际上就是在function直接传一个payload而已

//ProductListOne.js
  methods:{
        reducePrice:function (payload) {
          this.$store.dispatch('reducePrice',payload)
        }
    }

3.既然dispatch改了，我们的action和mutation也要改。

//store/index.js

  mutations: {
    reducePrice: (state,payload) => {
      state.products.forEach(product => {
        product.price -= payload;
      })
    }
  },
  actions:{
    //context是上下文，这里类似store
    reducePrice:(context,payload)=>{
      setTimeout(function () {
        context.commit('reducePrice',payload)
      },2000)
    }
  }

这样每次点击都减4了。

预览

Mapping Actions & Getters

如果我们有很多个getters和actions怎么办？难道在每一个都在computed里用函数调用吗？
这样是不是有点繁琐？

我们可以用mapping来解决。

引入mapActions和mapGetters

//ProductListOne.js
import {mapActions,mapGetters} from 'vuex'

然后使用

<script>
  import {mapActions,mapGetters} from 'vuex'
  export default {
    computed: {
      products(){
        return this.$store.state.products;
      },
      ...mapGetters([
        'saleProducts'
//        'yourNextOne'
      ])
    },
    methods:{
      ...mapActions([
          'reducePrice'
//         'yourNextOne'
      ])
    }
  }
</script>

注意

如果此时浏览器无法识别我们的es6语法，比如...mapActions，我们需要安装babel

npm install babel-preset-stage-2 --save-dev

//.babelrc    配置
{
  "presets":[
    ["env",{"modules":false}],
    ["stage-2"]
  ]
}

结果当然是不变的。只不过当我们有多个action和getter的时候，调用更加方便。

可能大家看晕了，有图片版本

image.png

源代码：

myGitHub

usage

git clone git@github.com:80666881/vuex-tutorial.git

npm install

npm start
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 195,360评论 5赞 461
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,195评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 142,543评论 0赞 323
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,420评论 1赞 266
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,242评论 4赞 357
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,224评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,626评论 3赞 384
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,301评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,589评论 1赞 292
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,660评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,423评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,286评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,662评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,951评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,237评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,613评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,804评论 2赞 335