Vue2（十二）：Vuex环境搭建、Vuex工作原理、几个配置项、多组件共享数据、Vuex模块化

已于 2023-01-29 13:02:18 修改
阅读量2.2k 收藏 17
点赞数 7
分类专栏： Vue.js 文章标签： vue.js javascript 前端
于 2022-08-31 21:58:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42044763/article/details/126611445
版权

Vue2学习笔记：第十二章

一、Vuex环境搭建

1.安装vuex

安装：npm i vuex@3
注意Vue2一定要安装vuex3，如果是vue3可以直接npm i vuex安装的是vuex4，可以去package.json文件里看下vue的版本是啥，千万别输错了，不然会陷入痛苦的报错……

2.创建store文件

创建文件：src/store/index.js
在此文件中引入插件并使用vuex插件，使用vuex插件必须在引入store之前，如果在main.js中引入和使用vuex的话，由于js文件里所有的import语句都会提升到最开始执行，所以会报错滴。总结：引入store必须在Vue.use(Vuex)之后

//该文件用于创建Vuex中最为核心的store

//引入Vue
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';//引入插件并使用插件
Vue.use(Vuex); //使用插件后就可以在vm,vc里使用store配置项

//准备actions,用于响应组件中的动作
const actions = {};

//准备mutations,用于操作数据(state)
const mutations = {};

//准备state,用于存储数据
const state = {};

//创建store
const store = new Vuex.Store({
    actions: actions,
    mutations, //简写
    state //简写
});

//导出store
export default store;

3.main.js引入store

JS执行的时候会把import提升到顶部，与摆放顺序无关，如果放在main.js里 import store from './store' 无论放到哪里都会比Vue.use(Vuex)先执行，要想把 Vue.use(Vuex) 要放到实例化之前只有放进index.js

//js文件里所有的import语句都会提升到最开始执行
// 引入Vue
import Vue from 'vue';
// 引入App
import App from './App.vue';
Vue.config.productionTip = false;

//引入store
import store from './store/index.js';

// 创建一个Vue实例
new Vue({
    el: '#app',
    store: store,  //或者直接写store
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this; //创建全局事件总线
    }
});

这样的话，vm和所有vc就都能碰到$store了

二、Vuex的工作原理

1.看图说话

在这里插入图片描述

这个工作流程用一个通俗的例子来解释：VC就是顾客，actions就是服务员，mutations就是厨师，state就是菜的原料。顾客（VC）来到店里，先告诉（dispatch）服务员（actions）要吃啥菜，然后服务员把菜单给（commit）厨师（mutations），完了之后厨师对菜的原料（state）来个加工（mutate），最后再给（render）顾客（VC）

2.用例子来解释工作原理

使用vuex实现求和案例
在这里插入图片描述
1、首先应该把求和数据给 vuex的state对象

const state = {
    sum: 0,  //初始化数据
};

2、页面上插值语法就该用

<h1>当前求和为：{{  $store.state.sum  }}</h1>

3、在组件中的回调就可以用dispatch发给actions（点菜），注意如果没有业务逻辑，直接commit可以跳过actions直接给mutations

add() {
           this.$store.dispatch('jia', this.addnum);
           //如果没有业务逻辑，直接commit可以跳过actions直接给mutations
           //this.$store.commit('JIA', this.addnum);
        },

4、在actions中使用jia这个函数来接（处理顾客需求），并且使用commit发给mutations（需求告诉厨师）。这里jia函数会接到两个参数，第一个参数是浓缩版的$store，方便你在这里调用commit把东西给mutations，第二个参数是组件那边传过来的数据。

jia(context, value) {
        //第一个参数是浓缩版的$store，方便你在这里调用commit把东西给mutations
        //第二个参数是传过来的数据
        context.commit('JIA', value); 
    },

5、在mutations中使用JIA这个函数来接（做菜），一般都写成actions对应函数的大写，意思是mutations更nb。也是接两个参数，第一个参数是state对象，第二个参数是传过来的数据。

JIA(state, value) {
    //第一个参数是state对象，第二个参数是传过来的数据
    console.log('mutations中的JIA被调用了 ', state, value);
    state.sum += value;
},

6、最后通过state中匹配的setter，实现响应式，把数据更新到页面（上菜）。

3.Count.vue文件

<template>
    <div>
        <h1>当前求和为：{{  $store.state.sum  }}</h1>
        <select v-model.number="addnum">
            <option value="1" checked>1</option><!-- 不写冒号就是字符串但可以v-model.number -->
            <option value="2">2</option> <!-- 不写冒号就是字符串但可以v-model.number -->
            <option value="3">3</option> <!-- 不写冒号就是字符串但可以v-model.number -->
        </select>
        <button @click="add">+</button>
        <button @click="subtract">-</button>
        <button @click="oddAdd">当前求和为奇数再加</button>
        <button @click="waitAdd">等1秒再加</button>
    </div>
</template>

<script>
export default {
    name: 'Count',
    props: ['title'],
    data() {
        return {
            addnum: 1
        }
    },
    methods: {
        add() {
            //如果没有业务逻辑，直接commit给mutations
            this.$store.commit('JIA', this.addnum);
        },
        subtract() {
            this.$store.commit('JIAN', this.addnum);
        },
        oddAdd() {
            //如果有业务逻辑，先dispatch给actions，再commit给mutations
            this.$store.dispatch('oddAdd', this.addnum);
        },
        waitAdd() {
            this.$store.dispatch('waitAdd', this.addnum);
        }
    },
};
</script>

4.store/index.js文件

其实actions中context也可以调用dispatch传给下一个actions中的方法，用于逻辑很复杂的情况，要一个一个传，这样层次分明，等处理差不多了再传给mutations

//该文件用于创建Vuex中最为核心的store
//引入Vue
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';//引入插件并使用插件
Vue.use(Vuex); //使用插件后就可以在vm,vc里使用store配置项

//准备actions,用于响应组件中的动作,写业务逻辑
const actions = {
    oddAdd(context, value) {
        //第一个参数是浓缩版的$store，方便你在这里调用commit把东西给mutations
        //第二个参数是传过来的数据
        console.log('处理了一些逻辑:oddAdd');
        context.dispatch('demo1', value); //如果逻辑多，可以多层往下传(第一个服务员)
    },
    demo1() {
        console.log('处理了一些复杂的逻辑:demo1');
        context.dispatch('demo2', value); //如果逻辑多，可以多层往下传(第二个服务员)
    },
    demo2() {
        if (context.state.sum % 2)
            context.commit('JIA', value); //传到这(第三个服务员)，再提交给mutations
    },
    waitAdd(context, value) {
        setTimeout(() => {
            context.commit('JIA', value);
        }, 1000);
    },
};

//准备mutations,用于操作数据(state)
const mutations = {
    JIA(state, value) {
        //第一个参数是state对象，第二个参数是传过来的数据
        console.log('mutations中的JIA被调用了 ', state, value);
        state.sum += value;
    },
    JIAN(state, value) {
        state.sum -= value;
    }
};

//准备state,用于存储数据
const state = {
    sum: 0,  //初始化数据
};

//创建并导出store
export default new Vuex.Store({
    actions: actions,
    mutations, //简写
    state //简写
});

5.几个注意点

1、一般来说都会把网络请求或其他业务逻辑写到actions里面
2、其实actions里面也可以操作数据，但是如果不在mutations里操作数据，而在actions里操作数据，vuex开发者工具会失效的
3、组件中也可以越过actions，即不写dispatch，直接编写commit把数据传给mutations

三、一些配置项

1.getters配置项

1、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，类似Vue中的计算属性computed。
2、使用：在store\index.js中追加getters配置，写函数，页面读的时候读的是返回值，这点其实也和计算属性很像。

......
//准备 getters ---用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

3、组件中读取数据：$store.getters.bigSum

<h1>当前求和放大十倍后为：{{ $store.getters.bigSum }}</h1>

4、其实state就类似于data，getters就类似computed

2.mapstate与mapGetters

首先导入四个map方法 import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
mapstate与mapGetters用到computed里，mapMutations,mapActions用到methods里

要说之前啊，我们要往页面上放state中的数据，还得$store.state.xxx，或者 $store.getters.xxx

<h1>当前求和为：{{  $store.state.sum  }}</h1>
<h1>当前求和放大十倍后为：{{  $store.getters.bigSum  }}</h1>
<h1>我在{{  $store.state.school  }}学习{{  $store.state.subject  }}</h1>

真的是非常麻烦啊，想简单点写，就可以用一下子计算属性：

computed: {
    //靠程序员亲自写计算属性来实现state插值语法编码方便
    sum() {
          return this.$store.state.sum;
      },
      school() {
          return this.$store.state.school;
      },
      subject() {
          return this.$store.state.subject;
      },
      bigSum() {
         return this.$store.getters.bigSum;
     }
},

诶这样就可以这么写了：

<h1>当前求和为：{{  sum  }}</h1>
<h1>当前求和放大十倍后为：{{  bigSum  }}</h1>
<h1>我在{{  school  }}学习{{  subject  }}</h1>

但是实际上computed这些东西复用性很差，vuex给我们提供了一个mapState和mapGetters方法：用于帮助我们把state和getters中的数据映射为计算属性，具体写法是下面这样滴，用到了扩展运算符，先复习一下扩展运算符：

let obj1 = {x:100, y:200};
let obj2 = {
    a:1,
    ...obj1,
    b:2
}
console.log(obj2);  //{a: 1, x: 100, y: 200, b: 2}

然后下面这样写就欧了，这里注意对象写法可以任意起名，键对应计算属性方法名，值对应state中的数据名，如果方法名和数据名一样，就可以用数组形式简写

computed: {
    //靠mapState函数来实现上面的代码（对象写法）sum: 'sum'没有简写，sum: sum才可以简写
     ...mapState({ sum: 'sum', school: 'school', subject: 'subject' }),
    //靠mapState函数来实现上面的代码（数组写法）
    ...mapState(['sum', 'school', 'subject']),

    // 靠mapGetters函数来实现上面的代码（对象和数组写法）
     ...mapGetters({bigSum: 'bigSum'}),
    ...mapGetters(['bigSum'])
},

3.mapActions与mapMutations

要搁以前呐，我们这个要从组件直接用commit传数据给mutations，或者用dispatch传给actions，都需要在methods里配置：

methods: {
    //程序员费老大劲写的传mutations代码
     add() {
          //如果没有业务逻辑，直接commit给mutations
          this.$store.commit('JIA', this.addnum);
      },
      subtract() {
          this.$store.commit('JIAN', this.addnum);
      },

    //程序员费老大劲写的传actions代码
      oddAdd() {
          //如果有业务逻辑，先dispatch给actions，再commit给mutations
          this.$store.dispatch('oddAdd', this.addnum);
      },
      waitAdd() {
          this.$store.dispatch('waitAdd', this.addnum);
      },
},

但是如今有了mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数，还有mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数。
也是有两种写法， 对象写法中，键是方法名，值是传给mutations或者actions的方法名，如果方法名和传的方法名一样可以简写为数组形式，一些细节见注释

methods: {
	//使用mapMutations实现程序员费老大劲写的代码联系mutations
     ...mapMutations({ add: 'JIA', subtract: 'JIAN' }),
    //如果键值名字一样，可以用数组简写,记得页面也要同步
    //...mapMutations(['JIA', 'JIAN']),

    //使用mapActions实现程序员费老大劲写的代码联系actions
    ...mapActions({ oddAdd: 'oddAdd', waitAdd: 'waitAdd' }),
    // ...maoActions(['oddAdd', 'waitAdd']),
},

备注：mapActions与mapMutations使用时，其实创建的程序员费老大劲写的代码是不一样的，这两个玩意儿创建的东西是不带数据的，它创建的是这个：

 add(value) {
     this.$store.commit('JIA', value);
 },

若需要传递参数value，需要：在模板中绑定事件时传递好参数，否则参数value是事件对象。

<button @click="JIA(addnum)">+</button>
<button @click="JIAN(addnum)">-</button>
<button @click="oddAdd(addnum)">当前求和为奇数再加</button>
<button @click="waitAdd(addnum)">等1秒再加</button>

四、多组件共享数据

就是各个组件都能拿到state里的数据，然后用来用去了，很方便
在这里插入图片描述

在这里插入图片描述

五、Vuex模块化+命名空间（项目常用）

1.这是啥

如果我们写的state，actions什么的是服务于多个种类的，比如有管加法的，有管人员的，这样放到一起很乱，所以可以把它们拆开

2.目的

让代码更好维护，让多种数据分类更加明确。

3.使用方式：

可以都写到index.js里，也可以每个命名空间分别拆成多个js文件

const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {...}
}
}

const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
 countAbout,
 personAbout
}
})

（1）开启命名空间后，组件中读取state数据

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']), 
// 前边加个参数，意思是读取countAbout 里面的 sum,school.....

（2）开启命名空间后，组件中读取getters数据

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName'] //很奇葩
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

（3）开启命名空间后，组件中调用dispatch

如果不写namespaced则直接写addPersonWang就可以，但是开启了命名空间，必须要加上这个名字在前边，否则会报[vuex] unknown action type: addPersonWang的错误，而且前边这个名字必须和Vuex.Store({})配置项中的名字一致。

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

（4）开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

4.冷静，读读代码吧

（1）index.js

//引入Vue
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';//引入插件并使用插件
Vue.use(Vuex);

//关于计数的相关配置
import countAbout from './Count'

//关于人员的相关配置
import personAbout from './Person'


//创建并导出store
export default new Vuex.Store({
    modules: {
        countAbout: countAbout,
        personAbout  //重名简写 
    }
});

（2）Count.js

export default {
    namespaced: true,
    state: {
        sum: 0,  //初始化数据
        school: '杭州',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10;
        }
    },
    actions: {
        oddAdd(context, value) {
            //第一个参数是浓缩版的$store，方便你在这里调用commit把东西给mutations
            //第二个参数是传过来的数据
            context.commit('JIA', value);
        },
        waitAdd(context, value) {
            setTimeout(() => {
                context.commit('JIA', value);
            }, 1000);
        },
    },
    mutations: {
        JIA(state, value) {
            //第一个参数是state对象，第二个参数是传过来的数据
            console.log('mutations中的JIA被调用了 ', state, value);
            state.sum += value;
        },
        JIAN(state, value) {
            state.sum -= value;
        },
    }
}

（3）Count.vue

这里边有个在actions里发送ajax请求，可以研究研究

<template>
    <div>
        <h1>当前求和为：{{  sum  }}</h1>
        <h2>当前求和放大十倍后为：{{  bigSum  }}</h2>
        <h3>我在{{  school  }}学习{{  subject  }}</h3>
        <select v-model.number="addnum">
            <option value="1" checked>1</option><!-- 不写冒号就是字符串但可以v-model.number -->
            <option value="2">2</option> <!-- 不写冒号就是字符串但可以v-model.number -->
            <option value="3">3</option> <!-- 不写冒号就是字符串但可以v-model.number -->
        </select>
        <button @click="JIA(addnum)">+</button>
        <button @click="JIAN(addnum)">-</button>
        <button @click="oddAdd(addnum)">当前求和为奇数再加</button>
        <button @click="waitAdd(addnum)">等1秒再加</button>

        <h2 style="color:red">Count里边读personList</h2>
        <ul style="color:red">
            <li v-for="p in personList" :key="p.id">{{  p.name  }}</li>
        </ul>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
    name: 'Count',
    data() {
        return {
            addnum: 1
        }
    },
    computed: {
        personList() {
            return this.$store.state.personAbout.personList;
        },
        ...mapState('countAbout', ['sum', 'school', 'subject']),
        ...mapGetters('countAbout', { bigSum: 'bigSum' }),
    },
    methods: {
        ...mapMutations('countAbout', ['JIA', 'JIAN']),
        ...mapActions('countAbout', { oddAdd: 'oddAdd', waitAdd: 'waitAdd' }),
    },
    mounted() {
        console.log(this.$store)
    }
};
</script>

（4）Person.js

import axios from 'axios';
import { nanoid } from 'nanoid';
export default {
    namespaced: true,
    state: {
        personList: [
            { id: 1, name: 'zzy' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name;
        }
    },
    actions: {
        addPersonHan(context, value) {
            if (value.name.indexOf('韩') === 0) {
                context.commit('ADD_PERSON', value);
            } else {
                alert('添加的人不姓韩！');
            }
        },
        //发送ajax请求拿到名字
        addPersonServer(context) {
            axios.get('http://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data });
                },
                error => {
                    console.log(error.message);
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            state.personList.unshift(value);
        }
    }
}

（5）Person.vue

<template>
    <div>
        <h2>Person里边读personList</h2>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="addPerson">添加</button>
        <button @click="addPersonHan">添加一个姓韩的人</button>
        <button @click="addPersonServer">随机添加一个名字</button>
        <h2>第一个人的名字：{{  firstPersonName  }}</h2>
        <ul>
            <li v-for="p in personList" :key="p.id">{{  p  }}</li>
        </ul>
        <h2 style="color:red">Person里读sum：{{  add  }}</h2>
    </div>
</template>

<script>
import { nanoid } from 'nanoid';
export default {
    name: 'Person',
    data() {
        return {
            name: ''
        }
    },
    computed: {
        personList() {
            return this.$store.state.personAbout.personList;
        },
        add() {
            return this.$store.state.countAbout.sum;
        },
        firstPersonName() {
            return this.$store.getters['personAbout/firstPersonName'];
        }
    },
    methods: {
        addPerson() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.commit('personAbout/ADD_PERSON', personObj);
            this.name = '';  //添加完了输入框置空
        },
        addPersonHan() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.dispatch('personAbout/addPersonHan', personObj);
        },
        addPersonServer() {
            this.$store.dispatch('personAbout/addPersonServer');
        }
    },
};
</script>

注意：只有指定相应的模块名才能找到对应的数据和方法（前提是模块开启了命名空间）
在这里插入图片描述

学完vuex脑容量不够了………………

DantinZhang
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vuex-i18n：使用vuex作为存储的vue.js 2.0本地化插件
02-28
vuex-i18n 我们是很棒的vue，vuex和vue-router库的忠实拥护者，他们只是在寻找易于使用的国际化插件，并尽可能多地使用“标准库”。 与其他国际化插件的主要区别是直接在应用程序中或以后从服务器直接使用和支持语言环境。 要求 Vue ^ 2.0.0 威克斯^ 2.0.0 安装 $ npm install vuex-i18n 设置 vuex-i18n插件旨在用于将vuex用作存储并需要本地化消息的应用程序。 确保已预先加载vue和vuex。 该插件提供了一个vuex模块来存储本地化信息和翻译，还提供了一个插件以允许从组件轻松访问。 该插件不对您要如何加载本地化信息进行任何假设。 它可以在应用程序捆绑包中启动时加载，也可以在用户切换到其他语言后动态加载。 可以在测试目录中找到相应的示例。 // load vue and vuex instance import V
详解vue+vuex+koa2开发环境搭建及示例开发
11-26
写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务，从而提供一些后端接口，供前端调用。 搭建这个环境的目的是： 前端工程师在跟后台工程师商定了接口但还未联调之前，涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径，而不是直接在前端写几个死数据。即，模拟后端接口。 当然在这整个过程（搭建环境 + 开发示例demo）中，涉及到以下几点知识点。 包括： koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> state、mutations、actions的使用 第一部分：环境搭
Vue2（十二）：Vuex环境搭建、Vuex工作原理、Vuex开发者工具、几个配置项、多组件共享数据、Vuex模块化
最新发布
Hdhhdhbsjxbdhvyg的博客
03-30 1189
你写的函数在Actions（数据类型是Object）就会有一个函数跟它对应，然后你自己再去调用commit函数（提交），到了mutations（数据类型也是Object），commit里的jia，mutations也会有一个jia跟它对应，同时它还会拿到两个参数：state状态和2。mutate不用你调用，只需要在mutations里的jia写一句state.sum+=2，底层自动加2，sum就不是0是2了，然后Vuex帮你开始渲染render，页面上的sum就变化了。
vue2 vuex 安装使用教程
weixin_68266812的博客
09-05 175
一，vuex 官网存储数据兄弟组件之间传值三，传统的组件之间的共享数据方式缺点：只能通过父传子 和 子传父的方式传值，若想要两个毫无关系的组件传值则很繁琐（需要找到 他们之间四，全局事件总线和 vuex 插件的区别。
Vue2.x - Vuex
伏城之外的博客
06-11 1833
Vuex学习总结
在Vue2中配置Vuex
weixin_44685106的博客
04-30 1675
Vuex流程（截选Vuex官网）Vuex流程（截选Vuex官网）1.Vuex 是一个专为 Vue.js 应用程序开发的。2.它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在 Vue 之后引入vuex。
vue2+vuex的使用
m0_61472704的博客
03-30 3744
一、vuex是干什么的？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
【Vue2】Vuex 的使用
Superman_H的博客
02-10 6342
# Vuex 简介 Vuex 是官方提供的一个插件，用于集中式管理组件共用的数据。使用 Vuex 后，任何组件之间都可以进行通信。Vuex 的数据存储是响应式的，当组件从 store 中获取并改变数据时，模版会被重新渲染。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/bd75e31c2a1e4ac99b8a400a0523da92.png#pic_center) 1. State (状态)：用于存储数据。存储的数据供 Vue Components 使用
vue2-Vuex
weixin_45002586的博客
11-15 552
vue vuex
【vue2】vuex超超超级详解！(核心五大配置项)
嗨，朋友你好！我是前端领域的工作者
02-01 5119
vuex基础认识、state、getters、mutations actions、modules使用。以及辅助函数mapState、mapGetters、mapMutations、mapActions的使用
Vue2基础十、Vuex
李宥的博客
07-27 767
- vuex 是一个 vue 的 `状态管理工具`，状态就是数据。 - 大白话：vuex 是一个插件，可以帮我们`管理 vue 通用的数据 (多组件共享的数据)` 例如：购物车数据 个人信息数据
vuex-loopback:Vuex模块工厂和用于环回的Vue组件
05-10
正在安装 安装axios和vuex-loopback 。 yarn add axios vuex-loopback 或通过npm npm install axios vuex-loopback 创建Vuex模块 1.导入axios和模块工厂。 import axios from 'axios' ...4.由模块工厂创建Vuex模块。
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
10-15
主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE:vuex 用户登录信息的数据写入与获取方式
10-16
今天小编就为大家分享一篇VUE:vuex 用户登录信息的数据写入与获取方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
新手学习笔记-Vuex安装
qq_41709084的博客
04-09 107
】Vuex安装。
vue2项目，vuex的安装与配置
weixin_45689946的博客
12-15 3481
一、介绍 官方解释：vuex是一个专为vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 我的理解：可以理解为是 全局变量 安装： npm install vuex --save 接着在src下，新建一个store目录，store里再新建index.js和module目录，module目录里再存放你自己定义的模块（不懂没关系，博主下面会有代码让你复制粘贴） 我的目录: store/index.js文件： import V
Vue2中 Vuex的使用
djsjsjjswj的博客
07-13 1134
state: {count: 0},// 定义mutations})
Vue：vuex
islunatic的博客
04-20 2726
1、vue插件vuex 是实现数据集中式状态管理的插件。数据由 vuex 统一管理。其它组件都去使用 vuex 中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。
Vue2中Vuex的基本使用
xtcgjk的博客
02-18 1965
本文主要介绍vue2中vuex的基本用法，以及如何实现模块化
使用Vuex：Vuex是Vue的状态管理器，可以实现多个组件之间的数据共享。，怎么实现
07-17
要使用 Vuex 实现多个组件之间的数据共享，需要按照以下步骤进行： 1. 安装 Vuex：在项目中安装 Vuex，可以使用 npm 或 yarn 命令进行安装。 ``` npm install vuex ``` 2. 创建 Vuex Store：在项目中创建一个 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值