vuex

程序员文章站 2022-06-27 22:30:08

一. 什么是Vuex? Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核心上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方 ......

一. 什么是vuex?

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

vuex核心

上图中绿色虚线包裹起来的部分就是vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解.

二. 为什么要使用vuex?

试想这样的场景, 比如一个vue的根实例下面有一个根组件名为app.vue, 它下面有两个子组件a.vue和b.vue, app.vue想要与a.vue或者b.vue通讯可以通过props传值的方式, 但是如果a.vue和b.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现, a组件想要和b组件通讯往往是这样的:

组件通讯

a组件说: "报告老大, 能否帮我托个信给小弟b" => dispatch一个事件给app
app老大说: "包在我身上, 它需要监听a组件的dispatch的时间, 同时需要broadcast一个事件给b组件"
b小弟说: "信息已收到", 它需要on监听app组件分发的事件

这只是一条通讯路径, 如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验.

vuex就是为了解决这一问题出现的

三.如何引入vuex?

下载vuex: npm install vuex --save
在main.js添加:

import vuex from 'vuex'

vue.use( vuex );

const store = new vuex.store({
    //待添加
})

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

四. vuex的核心概念?

在介绍vuex的核心概念之前, 我使用vue-cli初始化了一个demo, 准备以代码的形式来说明vuex的核心概念.这个demo分别有两个组件productlistone.vue和productlisttwo.vue, 在app.vue的datat中保存着共有的商品列表, 代码和初始化的效果如下图所示:

初始化效果

//app.vue中的初始化代码

<template>
<div id="app">
    <product-list-one v-bind:products="products"></product-list-one>
    <product-list-two v-bind:products="products"></product-list-two>
</div>
</template>

<script>
import productlistone from './components/productlistone.vue'
import productlisttwo from './components/productlisttwo.vue'

export default {
    name: 'app',
    components: {
        'product-list-one': productlistone,
        'product-list-two': productlisttwo
    },
    data () {
        return {
            products: [
                {name: '鼠标', price: 20},
                {name: '键盘', price: 40},
                {name: '耳机', price: 60},
                {name: '显示屏', price: 80}
            ]
        }
    }
}
</script>

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

//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 {

        }
    }
}
</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 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 {
            
        }
    }
}
</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>

核心概念1: state

state就是vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

此时我们就可以把app.vue中的两个组件共同使用的data抽离出来, 放到state中,代码如下:

//main.js
import vue from 'vue'
import app from './app.vue'
import vuex from 'vuex'

vue.use( vuex )

const store = new vuex.store({
  state:{ 
    products: [
      {name: '鼠标', price: 20},
      {name: '键盘', price: 40},
      {name: '耳机', price: 60},
      {name: '显示屏', price: 80}
    ]
  }
})

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

此时,productlistone.vue和productlisttwo.vue也需要做相应的更改

//productlistone.vue
export default {
    data () {
        return {
            products : this.$store.state.products //获取store中state的数据
        }
    }
}

//productlisttwo.vue
export default {
    data () {
        return {
            products: this.$store.state.products //获取store中state的数据
        }
    }
}

此时的页面如下图所示, 可以看到, 将公共数据抽离出来后, 页面没有发生变化.

state效果

核心概念2: getters

我将getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

此时,我们可以在main.js中添加一个getters属性, 其中的saleproducts对象将state中的价格减少一半(除以2)

//main.js
const store = new vuex.store({
  state:{
    products: [
      {name: '鼠标', price: 20},
      {name: '键盘', price: 40},
      {name: '耳机', price: 60},
      {name: '显示屏', price: 80}
    ]
  },
  getters:{ //添加getters
    saleproducts: (state) => {
      let saleproducts = state.products.map( product => {
        return {
          name: product.name,
          price: product.price / 2
        }
      })
      return saleproducts;
    }
  } 
})

将productlistone.vue中的products的值更换为this.$store.getters.saleproducts

export default {
    data () {
        return {
            products : this.$store.getters.saleproducts 
        }
    }
}

现在的页面中,product list one中的每项商品的价格都减少了一半

getters效果

核心概念3: mutations

我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

下面,我们在main.js中添加mutations属性,其中minusprice这个回调函数用于将商品的价格减少payload这么多, 代码如下:

//main.js
const store = new vuex.store({
  state:{
    products: [
      {name: '鼠标', price: 20},
      {name: '键盘', price: 40},
      {name: '耳机', price: 60},
      {name: '显示屏', price: 80}
    ]
  },
  getters:{
    saleproducts: (state) => {
      let saleproducts = state.products.map( product => {
        return {
          name: product.name,
          price: product.price / 2
        }
      })
      return saleproducts;
    }
  },
  mutations:{ //添加mutations
    minusprice (state, payload ) {
      let newprice = state.products.foreach( product => {
        product.price -= payload
      })
    }
  }
})

在productlisttwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusprice方法

//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>
            <button @click="minusprice">减少价格</button> //添加按钮
        </ul>
    </div>
</template>

在productlisttwo.vue中注册minusprice方法, 在该方法中commitmutations中的minusprice这个回调函数
注意:调用mutaions中回调函数, 只能使用store.commit(type, payload)

//productlisttwo.vue
export default {
    data () {
        return {
            products: this.$store.state.products
        }
    },
    methods: {
        minusprice() {
            this.$store.commit('minusprice', 2); //提交`minusprice,payload为2
        }
    }
}

添加按钮, 可以发现, product list two中的价格减少了2, 当然你可以自定义payload,以此自定义减少对应的价格.

mutations效果

(product list one中的价格没有发生变化，原因是getter 监听的是map方法产生的新对象)

核心概念4: actions

actions 类似于 mutations，不同在于：

actions提交的是mutations而不是直接变更状态
actions中可以包含异步操作, mutations中绝对不允许出现异步
actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
此时,我们在store中添加actions属性, 其中minuspriceasync采用settimeout来模拟异步操作,延迟2s执行该方法用于异步改变我们刚才在mutaions中定义的minusprice

//main.js
const store = new vuex.store({
  state:{
    products: [
      {name: '鼠标', price: 20},
      {name: '键盘', price: 40},
      {name: '耳机', price: 60},
      {name: '显示屏', price: 80}
    ]
  },
  getters:{
    saleproducts: (state) => {
      let saleproducts = state.products.map( product => {
        return {
          name: product.name,
          price: product.price / 2
        }
      })
      return saleproducts;
    }
  },
  mutations:{
    minusprice (state, payload ) {
      let newprice = state.products.foreach( product => {
        product.price -= payload
      })
    }
  },
  actions:{ //添加actions
    minuspriceasync( context, payload ) {
      settimeout( () => {
        context.commit( 'minusprice', payload ); //context提交
      }, 2000)
    }
  }
})

在productlisttwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minuspriceasync方法

<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>
            <button @click="minusprice">减少价格</button>
            <button @click="minuspriceasync">异步减少价格</button> //添加按钮
        </ul>
    </div>
</template>

在productlisttwo.vue中注册minuspriceasync方法, 在该方法中dispatchactions中的minuspriceasync这个回调函数

export default {
    data () {
        return {
            products: this.$store.state.products
        }
    },
    methods: {
        minusprice() {
            this.$store.commit('minusprice', 2);
        },
        minuspriceasync() {
            this.$store.dispatch('minuspriceasync', 5); //分发actions中的minuspriceasync这个异步函数
        }
    }
}

添加按钮, 可以发现, product list two中的价格延迟2s后减少了5

actions效果

核心概念5: modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const modulea = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleb = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new vuex.store({
  modules: {
    a: modulea,
    b: moduleb
  }
})

store.state.a // -> modulea 的状态
store.state.b // -> moduleb 的状态

vuex官方文档:
vuex官方案例演示源码:

上一篇： Python学习笔记7——文本、模块

下一篇： win10自带邮箱如何使用？win10自带邮箱如何同步qq邮箱邮件？

vuex

一. 什么是vuex?

二. 为什么要使用vuex?

三.如何引入vuex?

四. vuex的核心概念?

核心概念1: state

核心概念2: getters

核心概念3: mutations

核心概念4: actions

核心概念5: modules

详解关于Vuex的action传入多个参数的问题

Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

如何使用Vuex+Vue.js构建单页应用

详解如何在vue-cli中使用vuex

vue2.0学习之axios的封装与vuex介绍

Vuex入门到上手教程

vuex页面刷新后数据丢失的方法

vuex如何重置所有state(可定制)

vuex源码分析(二) state及strict属性详解

vuex

一. 什么是vuex?

二. 为什么要使用vuex?

三.如何引入vuex?

四. vuex的核心概念?

核心概念1: state

核心概念2: getters

核心概念3: mutations

核心概念4: actions

核心概念5: modules

详解关于Vuex的action传入多个参数的问题

Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

如何使用Vuex+Vue.js构建单页应用

详解如何在vue-cli中使用vuex

vue2.0学习之axios的封装与vuex介绍

Vuex入门到上手教程

vuex页面刷新后数据丢失的方法

vuex如何重置所有state(可定制)

vuex源码分析(二) state及strict属性 详解

vuex源码分析(二) state及strict属性详解