十六、状态管理——Vuex（1）

最新推荐文章于 2024-05-03 20:34:00 发布
最新推荐文章于 2024-05-03 20:34:00 发布
阅读量1k 收藏
点赞数
分类专栏： # Vue.js 3.0 从入门到实战 文章标签： vue.js 简单的状态管理 安装 Vuex 基本用法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GXL_1012/article/details/128506211
版权

本章概要

  • 简单的状态管理
  • 安装 Vuex
  • 基本用法

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

Vuex 也被集成到了 Vue 官方调试工具 vue-devtools 中，提供了诸如零配置的 time-travel 调试、状态快照导入/导出等高级调试功能。

以下为 Vuex 的工作原理图。
在这里插入图片描述

16.1 简单的状态管理

Vue.js 应用程序数据的真实来源是响应式数据对象，组件实例只是代理对它的访问，这一点经常被忽视。因此，如果有一个状态需要被多个实例共享，可以使用 reactive() 方法使一个对象成为响应式数据。如下：

<div id="app-a">App A:{{ message }}</div>
<div id="app-b">App B:{{ message }}</div>

<script>
  const sourceOfTruth = Vue.reactive({
    message: 'Hello'
  })

  const appA = Vue.createApp({
    data() {
      return sourceOfTruth;
    }
  }).mount('#app-a');

  const appB = Vue.createApp({
    data() {
      return sourceOfTruth;
    }
  }).mount('#app-b');

</script>

现在每当 sourceOfTruth 发生变化时，appA 和 appB 都会自动更新它们的视图。但现在有一个问题，因为 sourceOfTruth 是一个单一的数据源，任意一个 app 都可以随时更改数据，而不会留下任何痕迹，这将会很难调试应用程序。例如：

const appB = Vue.createApp({
    data() {
        return sourceOfTruth;
    },
    mounted(){
        sourceOfTruth.message = 'go' //两个 app 都将渲染 go 信息
    }
}).mount('#app-b');

为了解决这个问题，可以采用 store 模式。如下：

const store = {
    debug:true,

    state:Vue.reactive({
        message:'Hello!'
    }),

    setMessageAction(newValue){
        if(this.debug){
            console.log('setMessageAction triggered with',newValue)
        }
        this.state.message = newValue;
    },

    clearMessageAction(){
        if(this.debug){
            console.log('clearMessageAction triggered')
        }
        this.state.message = '';
    }
}

现在所有改变存储状态的操作都放在 store 内。这种集中式的状态管理让我们更容易理解什么类型的更改可能发生，以及它们是如何触发的。当出现问题时，还会有一个导致错误发生的日志。

对于应用程序实例或组件，它们仍然可以拥有和管理自己的私有状态。如下：

<div id="app-a">{{ sharedState.message }}</div>
<div id="app-b">{{ sharedState.message }}</div>

<script>
    const appA = Vue.createApp({
        data() {
            return {
                privateState : {},
                sharedState : store.state
            };
        },
        mounted(){
            store.setMessageAction('Goodbye!')
        }
    }).mount('#app-a');

    const appB = Vue.createApp({
        data() {
            return {
                privateState : {},
                sharedState : store.state
            };
        },
    }).mount('#app-b');

</script>

需要注意的是，不要在操作中替换原始对象，组件和 store 需要共享同一对象的引用，以便观察到变化。
下图展示了 store 模式的状态变更。
在这里插入图片描述

作为一种约定，组件永远不允许直接改变属于store 的状态，而应该通过分发事件通知 store 执行操作。这种约定的好处是，可以记录 store 中发生的所有状态变化，并实现高级调试助手，如变化日志、快照和历史重放/时间旅行。

16.2 安装 Vuex

可以使用 CDN 方式安装。如下：

<!-- 引用最新版 -->
<script src = "https://unpkg.com/vuex@next"></script>
<!-- 引用指定版本 -->
<script src = "https://unpkg.com/vuex@4.0.0-rc.1"></script>

如果使用模块化开发，则使用 npm 安装方式。执行以下命令安装 Vuex：

npm install vuex@next --save

或者使用 yarn 安装，执行下面的命令：

yarn add vuex@next --save

提示：
注意安装 Vuex 时，要安装支持 Vue 3.0 的新版本 Vuex，即这里的 vuex@next。支持 Vue 2.x 的 Vuex 版本名是 vuex

在 Vue 3.0 的脚手架项目中使用，在 main.js 文件中导入 createStore，并调用该方法创建一个 store 实例，之后使用 Vue.js 应用程序实例的 use() 方法将该实例作为插件安装。如下：

import { createApp } from 'vue'
import { createStore } from 'vuex'

// 创建新的 store 实例
const store = createStore({
  state(){
    return {
      count:1
    }
  }
})

const app = createApp({
  // 根组件
})

// 将store实例作为插件安装
app.use(store)

16.3 基本用法

Vuex 使用单一状态树，也就是说，用一个对象包含了所有应用层级的状态，作为唯一数据源（single source of truth）而存在。每一个 Vuex 应用的核心就是 store ，store 可以理解为保存应用程序状态的容器。store 与普通的全局对象的区别有以下两点：

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中检索状态的时候，如果 store 中的状态发生变化，那么组件也会相应地得到高效更新。
  • 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显示地提交 mutation。这可以确保每个状态更改都留下可跟踪的记录，从而能够启用一些工具来帮助我们更好地理解应用。

接下来，通过一个购物车实例来学习 Vuex 的使用，按照以下步骤创建脚手架项目，安装 Vuex并进行基础配置。

（1）使用 Vue CLI 创建一个 Vue 3.0 的脚手架项目，项目名为 statemanage，直接选择 Default (Vue 3.0 Preview)([Vue 3] babel,eslint)，开始创建。

vue create statemanage

（2）启动 Visual Studio Code ，打开项目所在的文件夹，为项目安装 Vuex。选择【终端】->【新建终端】选项，在弹出的终端窗口中输入以下命令安装 Vuex：

npm install vuex@next --save

（3）在实际项目开发中，通常是把状态管理相关文件单独放到一个文件夹下，以集中管理和配置。在 src 目录下新建一个文件夹 store ，在该文件夹下新建一个 index.js 文件。编辑该文件，如下：

store/index.js

import { createStore } from "vuex";

const store = createStore({
    // 状态数据通过 state() 函数返回
    state(){
        return{}
    }
})

export default store;

（4）在程序入口 mian.js 文件中使用 store 实例，从而在整个应用程序中应用 Vuex 的状态管理功能。如下：

mian.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'

createApp(App).use(store).mount('#app')

接下来就可以正式编写购物车实例了。首先将购物车中的商品数据放到 store 中统一管理。

在实际项目中，购物车中的商品数据是用户在商品页面添加商品保存的，而所有的商品信息都是从后端服务器得到的。简单起见，在前端硬编码一些商品数据，作为购物车中用户选购的商品。
在 src 目录下新建一个文件夹 dta，在该文件夹下新建一个 books.js 文件。编译该文件，如下：

data/books.js

export default [
    {
        id: 1,
        title: '《克拉拉与太阳》',
        price: 50,
        count: 1
    },
    {
        id: 2,
        title: '《字母表谜案》',
        price: 60,
        count: 1
    },
    {
        id: 3,
        title: '《置身事内》',
        price: 70,
        count: 1
    },
]

在 books 模块中导出一个图书商品的数组，将该数组作为 store 中状态数据的来源。编辑 store 目录下的 index.js 文件。如下：

store/index.js

import { createStore } from "vuex";
import books from "@/data/books";

const store = createStore({
    // 状态数据通过 state() 函数返回
    state() {
        return {
            items: books  // 使用导入的 books 对 items 进行格式化
        }
    }
})

export default store;

现在可以使用 store.state.items 访问商品数据。前面在 main.js 中已经引入了 store 实例，该 store 实例会被注入根组件下的所有子组件中，因此在组件中，就可以通过 this.store 访问 store 。如果在组件中要展示 store 中的状态，应该使用计算属性返回 store 的状态。如下：

computed:{
  books(){
    return this.$store.state.items;
  }
}

之后在组件的模板中就可以直接使用 books。当 store 中的 items 发生变化时，组件内的计算属性 books 也会同步发生改变。
那么如何更改 store 中的状态呢？注意不要直接修改 items 的值。例如：

methods:{
  addCart(){
    this.$store.state.items.push({...})  // 不要这么做
  }
}

既然选择了 Vuex 作为应用的状态管理方案，那么就应该遵照 Vuex 的要求：**通过提交 mutation() 函数改变 store 中的状态。**在严格模式下，如果 store 中的状态改变不是由 mutation() 函数引起的，则会抛出错误，而且如果直接修改 store 中的状态，Vue 的调试工具也无法跟踪状态的改变。

在开发阶段，可以启用严格模式，以避免直接的状态修改，在创建 store 时，传入 strict:true 。如下：

const store = createStore({
  // ...
  strict:true
})

Vuex 中的 mutation() 函数非常类似于事件：每个 mutation() 函数都有一个字符串的事件类型和一个处理器函数。这个处理器函数就是实际进行状态更改的地方，它接收 state 作为第一个参数。如下：

const store = createStore({
  state(){
    return {
      count:1
    }
  },

  // mutations 选项中定义修改状态的方法
  // 这些方法接收 state 作为第一个参数
  mutations:{
    increment(state){
      state.count++
    }
  }
})

我们不能直接调用一个 mutation() 处理器函数，mutations 选项更像是事件注册，当触发一个类型为 increment 的 mutation 时，调用此函数。要调用一个 mutation() 处理器函数，需要用它的类型调用 store.commit() 方法。如下：

store.commit('increment')

实际上，提交时指定的 mutation 的类型就是我们在 mutations 选项中定义的 mutation() 处理器函数的名字。
在使用 store.commit() 方法提交 mutation() 时，还可以传入额外的参数，即 mutation() 的载荷（payload）。如下：

// ...
mutations:{
  increment (state,n){
    state.count += n
  }
}
store.commit('increment',10)

载荷也可以是一个对象。如下：

// ...
mutations:{
  increment(state,payload){
    state.count += payload.amount
  }
}
store.commit('increment',{
  amount:10
})

提交 mutation 时，也可以使用包含 type 属性的对象，这样传一个参数就可以了。如下：

store.commit({
  type:'increment',
  amount:10
})

当使用对象风格提交时，整个对象将作为载荷传给 mutation 函数，因此处理器保持不变。如下：

mutation : {
  increment (state,payload){
    state.count += payload.amount;
  }
}

还可以用常量代替 mutation 的类型。可以把常量放到一个单独的 JS 文件中，有助于项目团队对 store 中所包含的 mutation 一目了然。如下：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import { createStore } from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = createStore({
  state:{...},
  mutation:{
    // 可以使用 ES2015 的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state){
      // mutation 状态
    }
  }
})

接下来，在store 中定义一个mutation ，通过提交该 mutation 向购物车中添加商品。修改 store 目录下的 index.js 。如下：

store/index.js

import { createStore } from "vuex";
import books from "@/data/books";

const store = createStore({
    // 状态数据通过 state() 函数返回
    state() {
        return {
            items: books  // 使用导入的 books 对 items 进行格式化
        }
    },
    mutations:{
        pushItemToCart (state,book){
            state.items.push(book);
        }
    }
})

export default store;

接下来编写购物车组件。在 component 目录下新建 Cart.vue 。如下：

Cart.vue

<template>
    <div>
        <table>
            <tr>
                <td>商品编号</td>
                <td><input type="text" v-model.number="id" /></td>
            </tr>
            <tr>
                <td>商品名称</td>
                <td><input type="text" v-model.number="title" /></td>
            </tr>
            <tr>
                <td>商品价格</td>
                <td><input type="text" v-model.number="price" /></td>
            </tr>
            <tr>
                <td colspan="2"><button @click="addCart">加入购物车</button></td>
            </tr>
        </table>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="book in books" :key="book.id">
                    <td>{{ book.id }}</td>
                    <td>{{ book.title }}</td>
                    <td>{{ book.price }}</td>
                    <td>
                        <button>-</button>
                        {{ book.count }}
                        <button>+</button>
                    </td>
                    <td>金额</td>
                    <td><button>删除</button></td>
                </tr>
            </tbody>
        </table>
        <span>总价：￥0.00</span>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: 1
        }
    },
    computed: {
        books() {
            // return this.$store.state.items;
            return this.$store.state.items;
        }
    },
    methods: {
        addCart() {
            this.$store.commit('pushItemToCart', {
                id: this.id,
                title: this.title,
                price: this.price,
                count: this.quantity
            })
            this.id = '';
            this.title = '';
            this.price = '';
        }
    }
}
</script>
<style scoped>
div {
    width: 800px;
}

table {
    border: 1px solid black;
    width: 100%;
    margin-top: 20px;
}

th {
    height: 50px;
}

th,
td {
    border-bottom: 1px solid #ddd;
    text-align: center;
}

span {
    float: right;
}
</style>

简单起见，使用表格对购物车中的商品进行布局。
最后在 App.vue 组件中删除 HelloWorld 组件，使用 Cart 组件。如下：

App.vue

<template>
  <Cart />
</template>

<script>
import HelloWorld from './components/Cart.vue'

export default {
  name: 'App',
  components: {
    Cart
  }
}
</script>

打开终端，执行 npm run serve 命令，打开浏览器，访问 http://localhost:8080 ，出现如下界面：
在这里插入图片描述

此时输入一件商品信息，然后单击“加入购物车”，如下：
在这里插入图片描述

一只小熊猫呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
VUEXvuex
l_l_l_l_l_l_l_li的博客
07-15 199
一、什么是状态管理？ 二、vuex 的基本使用 注意：vuex里的数据都是响应式的 1、安装vuex npm install vuex@next 注意：vuex@next的意思是安装最新版本的vuex 2、创建Store 3、在组件中使用store 三、单一状态树 注意：虽然一个应用可以创建多个store,但是建议只创建一个store实例 三、vuex的五大核心 1、state 注意，state属性为一个函数返回一个对象 和data一样 使用opctionsAPI compu
Vuex详解，详细讲解一下Vuex
m0_55333789的博客
03-13 411
Vuex详解，详细讲解一下Vuex
vuex 跨过了commit 直接修改state的数据会怎样？
qq_45178972的博客
06-03 473
如果直接this.$store.state = xxx ;的话Chrome的vue devtool 插件就无法监听观察到state的变化； 所以必须通过commit 给mutation来修改state的数据
vuex使用步骤详解
qq_41939159的博客
11-05 277
vuex使用技巧 1.组件实时监听state状态 //store文件 const serveList = { state: { detailInfo: {} }, mutations: { setDetailInfo(state, info) { state.lawyerInfo = info; } }, actions: { onDetailInfo: function (con
vue3下的 vuex 安装到使用
weixin_42304234的博客
03-20 1857
vue3 vuex：state、mutation、getter、action的使用
Vue---vuex状态管理工具的前生今世
COCOLI_BK的博客
10-24 733
vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库,它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vue3组件之间通信(七)——Vuex在实际项目中的使用
weixin_44784401的博客
09-18 314
Vuex在实际项目中的使用
uni-app如何使用vuex（vue2—详）
最新发布
a895544608的博客
05-03 2299
二、mutations （更新数据，state中的数据只能使用mutations去改变数据—以上完————编写博客时意外点了撤回 差点功夫白费，幸好自带历史回退。一、state （管理组件数据，管理的数据是响应式的）——————————————————以上引入完成。——————————————————以下使用方法。this.$store.getters.属性名。this.$store.getters.属性名。，getters辅助函数也可调用——方法在四。this.$store.state.属性名。
Vue第24篇，Vue中Vuex的使用详细，Vuex实操（vuex的相关属性，vuex的五大核心属性）
weixin_65793170的博客
01-13 1237
⭐vuex简介:是vue的状态管理工具（也可理解为一个仓库），用于存储公共数据，任何组件都可以使用vuex里的公共数据； ⭐vuex使用场景：如果需要构建的是一个中大型单页应用，会考虑如何更好地在组件外部管理状态，就使用vuex；一般创建项目时都会勾选上vuex，或者通过npm或yarn安装
【Vue3学习】Vuex 状态管理 store
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
06-17 2870
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
【Vuex快速入门】vuex基础知识与安装配置
XSL_HR的博客
01-01 1394
一、vuex是什么？二、vuex的组成 三、为什么使用vuex？四、什么时候使用vuex？五、vuex的安装配置
Vue3.0（alpha），2020前端必修，50分钟掌握vue@next全家桶
03-19
Vue3.0（alpha）环境搭建，响应原理（Proxy、Reflect）及核心知识点（setup，reactive，props，生命周期等）讲解。vue-router（alpha）及vuex（alpha）的使用。
vue3 使用vuex以及数据持久化
YWW_ABC的博客
03-17 2823
【代码】vue3 使用vuex以及数据持久化。
vant部署_Vue 3.x配置Vuex使用Vant TabBar及部署
weixin_39727934的博客
01-06 772
Vue 3.x 配置Vuex及Vant TabBar使用并将Vue3.x项目打包部署至tomcat编者： wRitchie(吴理琪) 来源：http://www.bj9420.com概述：Vant有很多可以直接使用的组件，但真正要实际使用，应用起来还是比较费劲，尤其对于初学者而言。通过Vuex来记录选项卡状态的变化，在TabBar组件页面监听，判断当前页面是哪个选项卡页面，解决刷新时，选项卡默认为...
Vuex 安装
热门推荐
ivenqin的博客
03-11 1万+
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。首先我们来了解一下Vuex的安装，后面我们再继续具体讲解什么是Vuex。 下载安装 Vuex 有三种安装方式，下面我们一起来看一下： 直接下载 我们可以直接下载vuex的文件，链接地址：https://unpkg.com/vuex。这个链接会一直指向 NPM 上发布的最新版本，目前的版本为vuex v3.1.2。 或者我们还可以根据自...
vue项目vuex（store）模块初始化和使用
weixin_43697548的博客
04-24 3980
vue项目vuex（store）模块初始化和使用
日常学习笔记 - Vuex的安装使用及五大属性
weixin_46737742的博客
04-25 123
用官方文档的话来说，Vuex是为Vue.js而开发的一种状态管理模式，用于存储状态（数据），Vuex中存储的状态只能通过commit方式来进行修改，以达到对状态的监听。
Vue状态管理——Vuex
冲出仁川，走出马德里，故事还会再继续
07-27 427
文章目录1、序言2、安装Vuex3、基本用法 1、序言 前面我们已经介绍过父子组件之间的通信方式，父组件通过prop向子组件传递数据，子组件通过自定义事件向父组件传递数据。然而，在实际项目中，经常会遇到多个组件需要访问同一数据的情况，且都需要根据数据的变化做出响应，而这些组件之间可能并不是父子组件这种简单的关系。在这种情况下，就需要一个全局的状态管理方案。在Vue开发中，官方推荐Vuex。 Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态，并以相应的
Vuex详解(五种状态)
web$-小白
09-03 2582
Vuex的五中状态 , vuex中五种状态下的辅助函数的基本使用
vue-next
没有翅膀的我们，只是随便认为不能飞而已
10-24 6265
vue-next项目地址 git地址：链接 git clone git@github.com:vuejs/vue-next.git npm install npm run dev // 生成一个未压缩的状态vue文件 入门小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只小熊猫呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值