vuex快速入门

明灭_已关注赞赏支持

vuex快速入门

明灭_已关注

32019.03.22 16:02:01字数 1,046阅读 1,316

本文为课程 vuex深入浅出 的学习总结与记录；同时参照了vuex官方文档。

文中demo的代码可参考：我的码云

一、概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

不使用vuex的数据流：

image.png

使用vuex进行状态维护：

image.png

二、在项目中使用vuex

可以通过以下步骤引入vuex：

安装：npm install vuex --save

创建store目录，用来存放所有状态。大型项目的目录结构可能如下所示：

image.png

在此我们只创建一个store.js文件作为示例：

state中存放的是唯一数据源

importVuefrom'vue'importVuexfrom'vuex';Vue.use(Vuex)exportconststore=newVuex.Store({// 注意Store的S大写state:{data1:...,data2:......}})

在main.js中添加如下代码：

import{store}from'../store/index'newVue({...store,...})

三、核心概念介绍

原课程是以小demo的形式讲解vuex，在此依同样方法做以记录。

此demo有两个组件listOne.vue和listTwo.vue，App.vue为主组件。

最终效果和初始代码（省略样式）如下：

效果图

store.js:

importVuefrom'vue'importVuexfrom'vuex';Vue.use(Vuex)exportconststore=newVuex.Store({// 注意Store的S大写state:{productList:[{name:'goods 1',price:100},{name:'goods 2',price:200},{name:'goods 3',price:300},{name:'goods 3',price:400}]}})

App.vue:

<template><div><list-one/><list-two/></div></template><script>import listOne from './components/listOne.vue';import listTwo from './components/listTwo.vue';export default {  name: 'App',  components: {    listOne, listTwo  }}</script>

listOne.vue:

<template><divclass="list-one"><h1>list one</h1><ul><liv-for="(product, index) in productList":key=index><p>名称：{{product.name}}</p><p>价格：{{product.price}}</p></li></ul><button>降价</button><button>异步降价</button></div></template><script>export default {      data() {          productList: this.$store.state.productList // 获取store.js > state > productList      }  }</script>

listTwo.vue:

<template><divclass="list-two"><h1>list two</h1><ul><liv-for="(product, index) in getProductList":key=index><p>名称：{{product.name}}</p><p>价格：{{product.price}}</p></li></ul></div></template><script>import {mapGetters} from 'vuex'export default {    data() {          productList: this.$store.state.productList    }}</script>

核心概念1：state

state是vuex的唯一数据源，是所有组件的公共data。中上述代码中，我们已经将两个组件的公共数据存入state。在组件中，使用this.$store.state.product获取state中的数据。

如果需要获取多个state，可使用...mapState辅助函数。如下：

import{mapState}from'vuex;

...

computed: {

  ...mapState([

      'productList',

      '...'])}

此时组件中修改如下：

<li v-for="(product, index) in productList":key=index>

核心概念2：getters

getters用于从state中派生出一些状态，例如对列表进行过滤等。可以将getters理解为计算属性computed，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

getters接受state作为其第一个参数

这时我们可以在store.js中添加一个getter属性：saleProducts，用于将商品价格除以2。

// store.js：importVuefrom'vue'importVuexfrom'vuex';Vue.use(Vuex)exportconststore=newVuex.Store({state:{productList:[{name:'goods 1',price:100},{name:'goods 2',price:200},{name:'goods 3',price:300},{name:'goods 3',price:400}]},getters:{getSaledPrice:(state)=>{letsaleProduct=state.productList.map((item)=>{return{name:'**'+item.name+'**',price:item.price/2}})returnsaleProduct;}}})

将listOne.vue中的productList的值更换为this.$store.getters.getSaledPrice:

// listOne.vueexport default{data(){return{productList:this.$store.getters.getSaledPrice}}}

此时效果如下：（注意list one部分名称和价格的变动）

image.png

如果需要使用多个getters，可使用...mapGetters辅助函数。如下：

computed:{...mapGetters:(['getSaledPrice',...    ])}

核心概念3：mutation

更改vuex的store中的状态的唯一方法是提交mutation。vuex中的mutation类似于事件：每个mutation都有一个字符串的事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数（payload为第二个参数，也就是自定义参数）。

在此我们给store添加一个mutation属性reducePrice，用于将商品价格减少payload：

// store.jsmutations:{reducePrice:(state,payload)=>{returnstate.productList.forEach((product)=>{product.price-=payload;})}}

// listOne.vuemethods:{reducePrice(){this.$store.commit('reducePrice',4)}}

点击降价按钮，可以发现价格发生变化：

image.png

或使用mapMutations辅助对象：

// listOne.vue<template>...<button@click="reducePrice(4)">降价</button>...</template><script>.....  methons: {      ...mapMutations([        'reducePrice'      ])  }  .....</script>

核心概念4：action

action类似于mutation，不同之处在于：

action提交的是mutation，而不是直接变更状态。

action可以包含异步操作，而mutation不行。

actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象.

action通过store.dispatch方法触发，mutation通过store.commit方法提交。

在此我们添加一个action属性，用来进行异步降价操作（每隔2秒后改变价格）

// store.jsactions:{// 提交的是mutation，可以包含异步操作reducePriceAsync:(context,payload)=>{setTimeout(()=>{context.commit('reducePrice',payload);// reducePrice为上一步mutation中的属性},2000)}}

methods:{reducePriceAsync(){this.$store.dispatch('reducePriceAsync',2)},}

或使用mapActions辅助对象：

// listOne.js<template>...<button@click="reducePriceAsync(4)">异步降价</button>...</template><script>.....  methons: {    ...mapActions([          'resducePriceAsync'    ])  }  .....</script>

核心概念5：module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

image.png

18人点赞

vue

"小礼物走一走，来简书关注我"

赞赏支持还没有人赞赏，支持一下

明灭_有些鸟儿是笼子关不住的。

总资产26 (约2.40元)共写了2.1W字获得155个赞共19个粉丝

已关注

全部评论0只看作者

按时间倒序

按时间正序

被以下专题收入，发现更多相似内容

收入我的专题

前端之美-VueJsVUE

推荐阅读更多精彩内容

vuex状态管理 一

目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念？||如何在组件中去使用...

我跟你蒋阅读 1,313评论 2赞 44

11.vuex 探索之路

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应...

白水螺丝阅读 3,561评论 7赞 61

Vuex 状态管理工具

Vuex是什么？ Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...

萧玄辞阅读 1,509评论 0赞 6

Vuex一篇文章总结

vuex 场景重现：一个用户在注册页面注册了手机号码，跳转到登录页面也想拿到这个手机号码，你可以通过vue的组件化...

sunny519111阅读 4,920评论 6赞 107

vuex 要点 -- 原创

vuex是一个状态管理模式，通过用户的actions触发事件，然后通过mutations去更改数据（你也可以说状态...

reng99阅读 946评论 3赞 3

广告

明灭_

已关注

总资产26 (约2.40元)

《原则》 | 瑞·达利欧

阅读 39

原生js实现红绿灯效果

阅读 119

推荐阅读

var 为什么会被 let 取代

阅读 8,529

Promise的特性及实现原理

阅读 3,087

记录Vue移动端项目开发

阅读 91

公司企业站Vue-CLI4开发环境搭建详解

阅读 165

关于原型那些事

阅读 19

广告

评论0

赞18