猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vuex 的更新数据流程

2017-11-21 16:10:23 作者:yxl 次阅读 vue

```
  前端使用spa框架开发(下面基于vue.js)对于数据保存是一个问题,刷新了浏览器
  数据就会丢失,可能你会想到用sessionStorage、cokkie之类的,这个是可以实现的,但是对于数据操作,涉及方法的话,vuex 提供了一些操作方法
  
 ```
 ```
  dispatch可以是view视图中触发,也可以是程序业务逻辑来触发
  actions通过commit方法发出一个改变事件
  mutations中具体操作state的改变
  state的改变通过getter暴露给view,state改变后会立即通知用getter关联起来的view。
  创建一个Vuex.Store的实例,用于Vue实例。
 ```
 ### 下面看一个小demo
 
 1、我们创建几个js文件 index.js mutations.js actions.js states.js types.js
 2、index.js 的内容
 ```
    import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './states.js'           //状态值
    import mutations from './mutations.js'   //同步修改 state的值
    import actions from './actions.js'       //异步修改state的值
    
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
        state,
        mutations,
        actions
    });
 
 ```
 3、types.js
 ```
    //常量用来给mutations用
    export const LOGIN = 'LOGIN';
    
    export const LOGOUT = 'LOGOUT';
 
 ```
 4、mutations.js
 ```
 import * as types from './types.js'
 
    const mutations = {
        [types.LOGIN]: (state, data) => {
           state.token = data;
        },
        [types.LOGOUT]: (state) => {
            state.token = null;
        
        },
    };
    
    export default mutations;
 ```
 5、actions.js
 ```
     import * as types from './types.js'
    //actions常用于异步更改状态。也就是说它一般用来先发送请求,然后再commit
    export default {
        UserLogin({ commit }, data){
            commit(types.LOGIN, data);
        },
        UserLogout({ commit }){
            commit(types.LOGOUT);
        }
    }
 ```
 > 上面已经是一个vuex操作的大概流程,分工明确,图解分析下
 
 
 ```
dispatch可以是view视图中触发,也可以是程序业务逻辑来触发
actions通过commit方法发出一个改变事件
mutations中具体操作state的改变
state的改变通过getter暴露给view,state改变后会立即通知用getter关联起来的view。
创建一个Vuex.Store的实例,用于Vue实例。
 ```
 ### 操作步骤
 ```
 1、引入vuex
 2、要执行某个方法 使用
    (1)this.$store.dispatch('UserLogout');
    (2)  或者引入import { mapState,mapMutations,mapGetters } from 'vuex';
       然后就可以使用里面的方法
       methods:{
            ...mapActions(['UserLogout','UserLogout'])
        },
        //属性操作
        computed:{
            ...mapState(["token"]),
        }
 ```
 
 
 
 

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: vuex
0

网友评论