vuejs核心插件Vuex数据仓库（vuex数据管理）

最新推荐文章于 2024-03-05 19:23:10 发布

原创最新推荐文章于 2024-03-05 19:23:10 发布 · 744 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #数据仓库 #前端

Vuex是一个用于Vue.js应用的状态管理模式，提供集中式存储，确保组件间的共享数据能响应式更新。通过commitmutations进行同步操作，dispatchactions处理异步操作。Vuex适用于非父子组件间的数据传递和大型单页应用，简化状态管理并方便维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuejs核心插件Vuex数据仓库（vuex数据管理）: 实现组件之间公共数据的共享，及管理。

Vuex 是一个专为 Vue.js 应用程序开发的(数据的)状态管理模式。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。

Vuex采用“集中式存储管理”方式去管理数据，把这些数据应用到所有组件上！！！

vuex就是仓库---数据仓库--这个数据仓库里的所有的数据，是为组件来使用的！为组件来服务的！

vuex 只做 “数据” 的维护！！

对vuex仓库中数据的处理，我们都放在“模型”里面。在vuex这个仓库 store 里面。

每一个 Vuex 应用的核心就是 store（仓库）。看起来很像一个全局对象，但又不是全局对象。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

哪些数据应该放在vuex中？

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

vuex的工作流程

在视图中通过事件触发对应方法。在方法中的操作分以下两种情况。

a、如果是同步操作，则直接使用this.$store.commit提交一个mutations，让mutations去修改state的值。

b、如果有异步操作，则先使用this.$store.dispatch派发一个actions。在actions中处理异步操作（如：请求接口获取数据）然后在actions中再提交一个mutations，再让mutations去修改state的值。

在mutations中去修改state的值。

state的值变化，再影响到视图的渲染。

vuejs官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js

vuejs--生态系统--核心插件

安装 | Vuex

1.1Vuex概述

1.1.1Vuex概念

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享

使用Vuex管理数据的好处：

能够在vuex中集中管理共享的数据，便于开发和后期进行维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

1.1.2Vuex和组件通信对比

使用Vuex来管理数据共享，各组件无需关注组件间的数据通信传输，一切数据的读取和更新都是各组件与Vuex数据仓库间的操作，避免了复杂项目中数据管理混乱的情况发生

1.1.3Vuex使用场景

涉及到非父子关系的组件，例如兄弟关系、祖孙关系，甚至更远的关系组件之间的联系

中大型单页应用，考虑如何更好地在组件外部管理状态

1.2Vuex的基本使用

vuex在 vue-cli脚手架搭建的工程化项目中的应用。

1.2.1安装

npm i vuex -s

1.2.2语法

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

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

export default store

组件访问数据仓库store 中的公共数据，组件必须使用计算属性 computed

我们在计算属性中使用 this.$store.state.xxx 获取数据仓库中state中的数据

1.2.3 各个组件访问vuex中公共数据案例★★★★★

vuex在 html文件中的应用。

使用script标签引入

  <!-- 1.先引入vuejs框架 -->
    <script src="js/vue.js"></script>
    <!-- 2.在引入vuex插件 -->
    <script src="js/vuex.js"></script>

使用vuex，创建数据仓库

   // 二、创建store数据仓库
        // 使用Vuex
        Vue.use(Vuex)

        // 创建数据仓库
        let mystore = new Vuex.Store({
            // 存数据
            state:{
                totalPrice:0,
                goods:[
                    {
                        id:1,
                        goodname:'戴尔笔记本',
                        price:3999,
                        num:30
                    },
                    {
                        id:2,
                        goodname:'惠普打印机',
                        price:1560,
                        num:10
                    },
                    {
                        id:3,
                        goodname:'戴尔台式电脑',
                        price:4580,
                        num:100
                    }
                ]
            }
        })

挂载

var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){
               
                return{
                   
                }

            },
            store:mystore,
            methods:{
               

            },
            components: {
                goodTotalprice,goodList
            }
        })

在各个组件中使用数据仓库中的公共数据

完整代码演示：

<div id="app">
     
        <good-list></good-list>
        <good-totalprice></good-totalprice>
    </div>
   
    <template id="goodTotalprice">
        <div>
            goodTotalprice组件
            
            <h1>商品合计总价:{{totalprice}}</h1>
        </div>
    </template>
   
    <template id="goodList">
        <div>
            goodList组件
           <table width="800" align="center" border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>商品价格汇总</th>
                <th>操作</th>
            </tr>
            <tbody>
                <tr v-for="item in list">
                    <th>{{item.id}}</th>
                    <th>{{item.goodname}}</th>
                    <th>{{item.price}}</th>
                    <th>{{item.num}}</th>
                    <th></th>
                    <th></th>
                </tr>
            </tbody>
           </table>
        </div>

    </template>

 <script src="./js/vue.js"></script>
    <script src="./js/vuex.js"></script>
    <script>
        //创建数据仓库
        //(1)使用
        Vue.use(Vuex)
        //(2)
        let mystore=new Vuex.Store({
            //存数据
            state:{
                totalPrice:0,
                goods:[
                    {
                        id:1,
                        goodname:'戴尔笔记本',
                        price:3999,
                        num:30,
                        total:0
                    },
                    {
                        id:2,
                        goodname:'惠普打印机',
                        price:1560,
                        num:10,
                        total:0
                    },
                    {
                        id:3,
                        goodname:'戴尔台式电脑',
                        price:4580,
                        num:100,
                        total:0
                    }
                ]
            },
           

        })
        //创建组件，---组件访问数据仓库中的数据
        let goodTotalprice={
            template:`#goodTotalprice`,
            data(){
                return{

                }
            },
            computed:{
                totalprice(){
                    return this.$store.state.totalPrice;
                    
                }
            }
        }
        let goodList={
            template:`#goodList`,
            data(){
                return{
                   
                }
            },
            computed:{
                list(){
                    return this.$store.state.goods;
                    

                }
            },
            methods:{
               
            }
        }
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){
               
                return{
                   
                }

            },
            store:mystore,
            methods:{
               

            },
            components: {
                goodTotalprice,goodList
            }
        })
    </script>

预览：