vue中的状态管理 vuex store

vuex store 是响应式的，当vue组件从store中读取状态（state）时，若store中的状态发生更新时，会及时的响应给其他的组件。

store 中的四个核心选项: state mutation getters actions

1）state是用来存放组件之间共享的数据，一般会在组件的计算属性中获取state的数据。

使用：this.$store.state. ...

2) 在 Vuex store 中，实际改变状态(state) 的唯一方式是通过提交(commit) 一个 mutation。

在组件里提交： this.$store.commit('change', payload)

mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东西作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象

还有一点需要注意：mutations方法必须是同步方法！

　　var myStore =  new Vuex.Store({state:{//存放组件之间共享的数据name:"jjk",age:18,num:1},mutations:{//显式的更改state里的数据
             change(state,a){state.num += a; }},});

 Vue.component('hello',{template:"<p @click='changeNum'>姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p>",computed: {name(){return this.$store.state.name},age(){return this.$store.getters.getAge},num(){return this.$store.state.num}},mounted(){console.log(this)},methods: {changeNum(){//在组件里提交// this.num++;this.$store.commit('change',10)}},data(){return {// num:5}}})

3）getters

　　getters可以看成是store的计算属性。

　　getters下的函数接收state作为第一个参数。getters可以过滤组件中的数据，过滤的数据会存放到$store.getters对象中。

<script>Vue.use(Vuex);var myStore =  new Vuex.Store({state:{//存放组件之间共享的数据name:"jjk",age:18},mutations:{//显式的更改state里的数据
         },getters:{getAge(state){return state.age;}},actions:{//
         }});Vue.component('hello',{template:"<p>姓名：{{name}} 年龄：{{age}}</p>",computed: {name:function(){return this.$store.state.name},age:function(){return this.$store.getters.getAge}},mounted:function(){console.log(this)}})new Vue({el:"#app",data:{name:"dk"},store:myStore,mounted:function(){console.log(this)}})
</script>

4）actions

actions：类似于mutation ，但是mutations只能处理同步函数，而actions则是可以处理任何的异步操作

actions和mutations的区别：

　1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。

　2.Action 可以包含任意异步操作。

<script>Vue.use(Vuex);var myStore =  new Vuex.Store({state:{//存放组件之间共享的数据name:"jjk",age:18,num:1},mutations:{//显式的更改state里的数据
             change:function(state,a){//  state.num++;console.log(state.num += a); },changeAsync:function(state,a){console.log(state.num +=a);}},getters:{
             getAge:function(state){return state.age;}},actions:{//设置延时
             add:function(context,value){setTimeout(function(){//提交事件context.commit('changeAsync',value);},1000)}}});Vue.component('hello',{template:`<div><p @click='changeNum'>姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p><button @click='changeNumAnsyc'>change</button></div>`,computed: {name:function(){return this.$store.state.name},age:function(){return this.$store.getters.getAge},num:function(){return this.$store.state.num}},mounted(){console.log(this)},methods: {changeNum(){//在组件里提交this.$store.commit('change',10)},//在组件里派发事件 当点击按钮时，changeNumAnsyc触发-->actions里的add函数被触发-->mutations里的changeAsync函数触发changeNumAnsyc:function(){this.$store.dispatch('add', 5);}},data:function(){return {// num:5
            }}})new Vue({el:"#app",data:{name:"dk"},store:myStore,mounted:function(){console.log(this)}})
</script>

this.$store.dispatch('add', 5);

执行时会触发actions里面的方法，和commit的用法相同。

action的大致用法：

1. 在actions选项里添加异步函数并提交到对应的函数（在mutation选项里）中

context.commit('changeAsync',value);

actions:{add:function(context,value){setTimeout(function(){context.commit('changeAsync',value);},1000)}
}

2. 在组件里：将dispatch“指向”actions选项里的函数

 changeNumAnsyc:function(){this.$store.dispatch('add', 5);}

3.　在mutations选项里，要有对应的函数

changeAsync:function(state,a){console.log(state.num +=a);
}

https://www.cnblogs.com/first-time/p/6815036.html

转载于:https://www.cnblogs.com/150536FBB/p/11344549.html

vue中的状态管理 vuex store相关推荐

Vue 复学之状态管理 Vuex
Vuex是vue中的一种状态管理模式,就是一个状态仓库,仓库做什么?存储状态.管理状态(数据)的变化.提供状态获取窗口. 本文中一些测试用例基于@vue/composition-api@1.7.1 ...
vue总结 08状态管理vuex
状态管理类 Flux 状态管理的官方实现由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库 ...
Vue状态管理vuex
转: https://www.cnblogs.com/xiaohuochai/p/7554127.html 前面的话由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为 ...
vue项目的状态管理器(Vuex)
一.什么是vuex Vuex是vue项目的状态管理器(状态管理工具).vue项目的状态是通过vue实例(组件)绑定的变量来体现.所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件 ...
[vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
状态管理vuex的规范化使用~~总结
一.定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化二.安装 cnpm i vuex - ...
react中数据状态管理的四种方案
我们为什么需要状态管理? (1) 一个是为了解决相邻组件的通信问题. 虽然可以通过「状态提升」解决,但有两个问题: 每次子组件更新,都会触发负责下发状态的父组件的整体更新(使用 Context 也有这 ...
Vue中状态管理——Vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({// sta ...
vue状态管理存取数据_vue状态管理vuex从浅入深详细讲解
1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...

vue中的状态管理 vuex store

vue中的状态管理 vuex store相关推荐

最新文章

热门文章