1. 90前端首页
  2. 前端框架

VUE的简单状态管理模式store

在VUE中,有VUEX可以进行状态管理,但是一般是用于大型项目构建中。如果是小型项目,在VUE的官网推荐了一个简单的状态管理store。
这个简单状态管理store的使用方法和VUEX比较类似。
1.在项目中新建一个store.js文件,然后按官网推荐方法将需要管理的状态和方法放在里面,然后export暴露出来。

export var store = {
    debug: true,
    state: {   /*需要管理的状态*/
        count: 0,
        name: \'store\'
    },
    setNewCount(newVal) {   /*修改状态的方法*/
        this.state.count = newVal;
    },
    setNewName(newVal) {    /*修改状态的方法*/
        this.state.name = newVal;
    }
}

2.在需要使用该状态的组件中引入此文件:

import {store} from \'../../store.js\'

3.然后把需要的数据放到组件的data中,或者在方法中直接使用即可:

name: store.state.name

4.如果需要修改store中的状态,只需要直接调用store中的修改方法:

chgName() {
      let newName = \'222\';
      this.name = newName;
      store.setNewName(newName);
},

这里有一个问题,如果只执行store中的修改方法,本组件中的name是不会实时修改的,添加watch监听也不行。必须要单独进行赋值修改。这个问题我还没有弄清楚,有知道的希望能指点一下。
5.现在进入其他引入store进行状态管理的组件就可以看到新的值了。

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021967034

展开阅读全文

发表评论

登录后才能评论