一、Vuex简介

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

二、使用

1.安装依赖

情景1：在使用vueCli创建项目时勾选Vuex这个选项，项目会自动引入Vuex
情景2：在使用vue-cli创建项目时未勾选Vuex,此时需要安装Vuex，安装步骤如下：

首先，进入到创建项目的根目录下使用 `npm install --save vuex`命令进行安装；如果网速较慢可使用cnpm install --save vuex

安装完成后项目目录如下：

|__ node_modules
|__ public
|__ src|_ assest|_ components|_Hello.vue|_ store|_index.js|_ view|_HomeView.vue|_AboutView.vue

2.使用

store中index.js中：

import { createStore } from 'vuex'export default createStore({state: {count:10,},
})

main.js文件Vuex挂载到vue实例中

import Vue from 'vue'
import App from './App'
import store from './store'Vue.config.productionTip = falsenew Vue({el: '#app',store,  //创建的Vuex实例挂载到这个vue实例中render: h => h(App)
})

3.store 在组件中使用

在store文件夹下index.js中定义一个count

state:{count:10;
}

在组件中读取count

方法一：直接读取显示在页面

<template><div><p>{{ this.$store.state.count }}</p></div>
</template>

方法二：使用computed 计算属性读取

<template><div><p>{{ getCount }}</p></div>
</template><script>
export default{computed:{getCount(){return this.$store.state.count}}
}
</script>

方法三：使用mapState辅助函数

<template><div><p>{{ getCount }}</p></div>
</template><script>
import { mapState } from "vuex" //引入mapState
export default{computed:{...mapState(['count']),getCount(){return this.count}}
}
</script>

4.Mutation

官网定义：更改Vuex的store中的状态的唯一方法是提交mutation

通俗的理解：mutation是用来改变store中状态值

使用如下：

情景一：不携带参数

在store文件夹下的index.js中定义mutation (以改变上面count的值为例)

mutations: {addCount(state){    //对count执行加1的操作state.count += 1;},delCount(state){state.count -= 1; //对count执行减1的操作}
}

在组件中使用mutation

<template><div><p>{{ getCount }}</p><button @click="addHander">增加</button><button @click="delHander">减少</button></div>
</template><script>
export default{computed:{getCount(){return this.$store.state.count}},methods:{addHander(){this.$store.commit("addCount")     },delHander(){this.$store.commit("delCount")}}
}
</script>

情景二携带参数

增加一个输入框，将用户输入的值作为count增加减少的对象

在store文件夹下的index.js中定义mutation (以改变上面count的值为例）

mutations: {addCount(state，num){    //对count执行加1的操作state.count += num;},delCount(state, num){state.count -= num; //对count执行减1的操作}
}

在组件中使用

<template><div><p>{{ getCount }}</p><input type="text" v-model="num"><button @click="addHander">增加</button><button @click="delHander">减少</button></div>
</template><script>
export default{data(){return{num:""}    },computed:{getCount(){return this.$store.state.count}},methods:{addHander(){this.$store.commit("addCount",parseInt(this.num))     },delHander(){this.$store.commit("delCount",Number(this.num))}}
}
</script>

情景三：携带对象类型参数

在store文件夹下的index.js中定义mutation (以改变上面count的值为例）

mutations: {addCount(state，obj){    //对count执行加1的操作state.count += obj.num;},delCount(state, obj){state.count -= obj.num; //对count执行减1的操作}
}

在组件中使用

<template><div><p>{{ getCount }}</p><input type="text" v-model="num"><button @click="addHander">增加</button><button @click="delHander">减少</button></div>
</template><script>
export default{data(){return{num:""}    },computed:{getCount(){return this.$store.state.count}},methods:{addHander(){this.$store.commit("addCount",{num: parseInt(this.num)})     },delHander(){this.$store.commit("delCount",{num:Number(this.num)})}}
}
</script>

情景4 使用mapMutations辅助函数

首先，在组件中引入mapMutations函数

<template><div><p>{{ getCount }}</p><input type="text" v-model="num"><button @click="addHander">增加</button><button @click="delHander">减少</button></div>
</template><script>
import { mapState, mapMutations } from "vuex" //引入mapState
export default{data(){return{num:""}},computed:{...mapState(['count']),getCount(){return this.count}},methods:{...mapMutations(["addCount","delCount"]),addHander(){this.addCount({num: parseInt(this.num)})},delCount(){this.delCount({num: Number(this.num)})}}
}
</script>

5.Action

Action类似于Mutation但不同点在于：Action可以处理异步操作

state:{count:10,navInfo:[]
}action:{asyncUpdate(context){axios.get("网络请求接口").then(res=>{if(res.status === 200){context.commit("navInfo",res.data.banner)}else{context.commit("navInfo",[])}}).catch(err=>{console.log(err)})}
}

在组件中使用

情景一：直接使用

<template>
<div>    <ul><li v-for="(item,index) in banner" :key="index"><p>{{item.title}}</p></li></ul><button @click="getInfo">获取数据</button>
</div>
</template><script>export default{medthod:{getInfo(){this.$store.dispatch("asyncUpdate")}}}
</script>

情景2：使用mapActions辅助函数

<template>
<div>    <ul><li v-for="(item,index) in banner" :key="index"><p>{{item.title}}</p></li></ul><button @click="getInfo">获取数据</button>
</div>
</template><script>import { mapActions } from "vuex"export default{medthod:{...mapActions(['asyncUpdate'])getInfo(){this.asyncUpdate()}}}
</script>

Vuex 状态管理模式（使用）相关推荐

vuex状态管理模式：入门demo（状态管理仓）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
Vuex状态管理模式-M
Vuex Vuex 是一个专为 Vue.js 开发的状态管理模式.主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),页面多并且一层嵌套一层的传值,非常麻烦, ...
理解vuex -- vue的状态管理模式
2019独角兽企业重金招聘Python工程师标准>>> vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管 ...
mount 返回状态_状态管理模式 — Vuex如何使用？
Extract 试想当我们在开发一个Vue应用程序时,如果在一个项目中频繁的使用组件传参的方式来同步data中的值,一旦项目结构变得复杂,管理和维护这些数据将变得十分繁琐,为此,Vue为这些被多个组件 ...
【Vue.js】全局状态管理模式插件vuex
文章目录全局状态管理模式Vuex vuex是什么? 什么是"状态管理模式"? vuex的应用场景 Vuex安装开始核心概念一.State 1.单一状态树 2.在 Vue 组 ...
状态管理模式 - vuex 的使用介绍
前言大家好,不知道大家在用 vue 进行开发过程中有没有遇到这样一种场景,就是有些时候一些数据是一种通用的共享数据(比如登录信息),那么这类数据在各个组件模块中可能都会用到,如果每个组件中都去后台重 ...
vue从入门到进阶：Vuex状态管理（十）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
vue2中vuex状态管理的理解（菜单面包板）
本片理解基于vue2对应的Vuex文档,结合了官网文档以及众多前辈大佬所发布的帖子,由衷表示感谢. vuex的超详细讲解和具体使用细节记录随着我们进一步扩展约定,即组件不允许直接变更属于 store ...
[vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...

Vuex 状态管理模式（使用）

一、Vuex简介

二、使用

1.安装依赖

首先，进入到创建项目的根目录下使用 `npm install --save vuex`命令进行安装；如果网速较慢可使用cnpm install --save vuex

2.使用

3.store 在组件中使用

4.Mutation

5.Action

Vuex 状态管理模式（使用）相关推荐

最新文章

热门文章

Vuex 状态管理模式（使用）

一、Vuex简介

二、使用

1.安装依赖

首先，进入到创建项目的根目录下 使用 `npm install --save vuex`命令进行安装；如果网速较慢可使用cnpm install --save vuex

2.使用

3.store 在组件中使用

4.Mutation

5.Action

Vuex 状态管理模式（使用）相关推荐

最新文章

热门文章

首先，进入到创建项目的根目录下使用 `npm install --save vuex`命令进行安装；如果网速较慢可使用cnpm install --save vuex