Vuex的使用

2018-08-06 09:10:56来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

Vuex

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

应用场景

对于深层嵌套组件,依靠props进行父子组件的传递显得太过臃肿,而且难以维护。而vuex的出现就是为了解决数据传递的问题。Vuex作为一个全局管理仓库,可以管理所有组件的状态state,不同组件之间也可依靠Vuex来共享状态State。

Vuex不同于单纯的全局对象

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

2,改变store中状态的唯一途径就是显式地提交mutation。所有的state的改变都必须经过mutation事件,方便我们跟踪每一个状态的的变化。

核心概念

state

负责存储整个应用的状态数据。在vue组件中获取Vuex状态的方式如下,在计算属性中返回某个状态:

1,需要在DOM节点上获取到状态;

 实现:在项目中,在组件中把存在Vuex中的“columns”取出来,并显示在该组件上

 1),在computed中返回该状态。

1  computed: {
2    columns(){
3      return this.$store.state.columns;
4    }
5  },

2),在需要用到的dom节点上进行操作。

1 <el-col :span="20">
2    <el-checkbox-group   v-model="column">
3       <el-checkbox :label="item.name" v-for="(item,index) in columns" :key="index">{{item.name}}</el-checkbox>
4    </el-checkbox-group>
5 </el-col>

结果:每当store.state.columns变化时,都会重新计算属性,并且触发更新相关联的DOM。

2,在vue生命周期中获取到Vuex中的状态,可以直接用this.$store.state对象

eg:

this.id = this.$store.state.articleId;

mapState辅助函数

当一个组件需要获取多个状态时,vuex提供了mapState辅助函数生成计算属性。

实现:从Vuex中获取“activityLeft”和“columns”两个状态时,可以按以下两个方式获取。

1),直接获取

1 computed: {
2   activityLeft(){
3     return this.$store.state.activityLeft;
4   },
5   columns(){
6     return this.$store.state.columns;
7   }
8 }

2),用mapState辅助函数辅助函数获取

1 computed: {
2    ...mapState([
3       'activityLeft',
4       'columns'
5    ])
6 },

mutation

上面说到,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的mutation非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

实现:在组件中改变Vuex状态中的acticleId状态,不可以用“this.$store.state.articleId = 1”这种方式进行修改,需要以下面的方面进行修改。

eg:

1),组件中需要用state.commit来唤醒mutation中的handler。例如在点击编辑时,获取到该item的id传递给对应的handler

1 handleCurrentChange(id) {
2   this.$store.commit("getArticleId",id);
3 }

 2),在Vuex中添加一一对应的handler

1 mutations:{
2   getArticleId(state,id){
3     state.articleId = id;
4   },  
5 }

注意:

1,最好在提前在你的 store 中初始化好所有所需属性。上述例子应该在state中先初始化好articleId。

2,mutation必须是同步函数。在 mutation 中混合异步调用会导致你的程序很难调试,如果需要处理异步操作,可以使用Action

Action

1,Action 提交的是 mutation,而不能直接变更状态

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

实现:在项目中,在Action中使用axios去获取数据,并把数据存进Vuex的状态里面。

1),在组件的methods中通过 store.dispatch 方法触发Action

 1 handleSizeChange(val) {
 2   this.pageSize = val;
 3     let data = {
 4       "type":this.$store.state.navName,
 5       "wid":this.$store.state.websiteId,
 6       "pageSize":this.pageSize,
 7       "pageNum":this.pageNum,
 8       "searchTitle":this.searchTitle
 9      };
10    this.$store.dispatch("getArticle",data);
11 },

2),在Vuex注册一一对应的Action

 1 actions:{
 2   getArticle({commit},{type='',searchTitle='',wid,pageNum=1,pageSize=20}){
 3     axios.post(api.url+'articleList',{
 4       type:type,
 5       searchTitle:searchTitle,
 6       wid:wid,
 7       pageSize:pageSize,
 8       pageNum:pageNum
 9     }).then((response)=>{
10       if(response.data.ret == 0){
11         var data = response.data;
12         var msg = data.msg;
13         var total = data.total;
14         commit('getArticle',{msg,total})
15       }
16     });
17   },
18 }

3),通过提交 mutation 来记录状态变更

1 mutations:{
2   getArticle(state,data){
3     var res = data.msg;
4     state.activityList = res;
5     state.total = data.total;
6   },
7 }

重点store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise:

eg:一个 store.dispatch 在不同模块中可以触发多个 action 函数。

1 actions: {
2   async actionA ({ commit }) {
3     commit('gotData', await getData())
4   },
5   async actionB ({ dispatch, commit }) {
6     await dispatch('actionA') // 等待 actionA 完成
7     commit('gotOtherData', await getOtherData())
8   }
9 }

以上就是我在项目中基于vue-cli框架中使用Vuex的一些例子。最后上面提到的vuex状态附在下列store.js中

 1 import Vue from 'vue';
 2 import Vuex from 'vuex';
 3 import axios from 'axios';
 4 import api from '../api/api.js';
 5 Vue.use(Vuex);
 6 let store = new Vuex.Store({
 7   state:{
 8     columns:[],
 9     articleId:'',
10   },
11   mutations:{
12     getArticle(state,data){
13       var res = data.msg;
14       state.activityList = res;
15       state.total = data.total;
16     },
17     getArticleId(state,id){
18       state.articleId = id;
19     },
20   },
21   actions:{
22     getArticle({commit},{type='',searchTitle='',wid,pageNum=1,pageSize=20}){
23       axios.post(api.url+'articleList',{
24         type:type,
25         searchTitle:searchTitle,
26         wid:wid,
27         pageSize:pageSize,
28         pageNum:pageNum
29       }).then((response)=>{
30         if(response.data.ret == 0){
31           var data = response.data;
32           var msg = data.msg;
33           var total = data.total;
34           commit('getArticle',{msg,total})
35         }
36       });
37     },
38   }    
39 });
40 export default store;

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:我的ASP.NET学习笔记05Javascript基础知识01

下一篇:js 面向对象 ES5 AND ES6