vuex

作者: 杰森999 | 来源:发表于2017-10-24 22:33 被阅读0次

    文档:http://vuex.vuejs.org/zh-cn/modules.html
    这个modules是用来干什么的?

    这里写图片描述 前面我们做了一个这样的界面,有登录,有热点新闻。 我们学到了vuex
    这样一个框架。 这里写图片描述 我们可以看到state
    里,我们把user_name和新闻是糅合在一起的,如果我们这个项目的多人协作开发,这样就不是很方便。 所以modules
    就起到了这样一个作用。
    我们来演示一下怎么使用这个modules
    1.项目结构(我们参考了官方的http://vuex.vuejs.org/zh-cn/structure.html) 把用户和新闻模块分开。 这里写图片描述 2.UserModules.js:
    export default{ state:{ user_name:"" }, mutations:{ showUserName(state){ alert(state.user_name); } },}

    3.NewsModules.js:
    export default{ state:{ newslist:[], newsdetail:{} }, mutations:{ setAgree(state,agreeNum){ state.newsdetail.agree = agreeNum; } }, actions:{ agree(context,newsid){ // 进行请求,获取点赞后的agree字段属性值 Vue.http.post("http://localhost/agree.php",{newsid:newsid},{emulateJSON:true}).then(function (res) { // 处理业务 // 调用上面setAgree方法更新点赞数 context.commit("setAgree",res.body.agree); },function(){}) } }, getters:{ getNews(state){ return state.newslist.filter(function (news) { return !news.isdeleted; }) } }}

    4.这2步做好之后,我们已经把用户和新闻分离了,分离之后怎么引入呢?
    import UserModule from "./../store/modules/UserModule";import NewsModule from "./../store/modules/NewsModule";

    const vuex_store = new Vuex.Store({ modules:{ users:UserModule, news:NewsModule }})

    这个时候是否大功告成呢,肯定不是

    这里写图片描述 5.之后我们需要修改组件 news-list.vue
    : 这里写图片描述 需要修改此处的代码,需要加上我们的模块名,修改之后:
    <script> export default{ created(){ if (this.$store.state.news.newslist.length == 0){ // 请求服务器获取数据 this.$http.get("http://localhost/news.php").then(function (res) { this.$store.state.news.newslist = res.body; },function (res) { // 请求失败处理 }) } } }</script>

    this.$store.state.news.newslist
    ,news
    就是前面定义的module名。
    user-name.vue

    : 如果我们不做任何修改,点击“提交”按钮是获取不到用户输入的用户名的 这里写图片描述 修改如下:
    <script> export default{ props:["placeholder"], data:function () { return { username:"" } }, methods:{ userNameChange(){ //this.$emit("childChange","username",this.username) this.$store.state.users.user_name = this.username; } } }</script>

    this.$store.state.user_nam
    修改为:this.$store.state.users.user_name

    这里写图片描述
    至此,聪明的你应该已经发现:之前代码所有用到state
    的地方,都应该加上module名称来访问。
    其他注意点
    // 进行请求,获取点赞后的agree字段属性值Vue.http.post("http://localhost/agree.php",{newsid:newsid},{emulateJSON:true}).then(function (res) {// 处理业务// 调用上面setAgree方法更新点赞数context.commit("setAgree",res.body.agree);},function(){})

    NewsModule.js中,我们是通过Vue.http.post()
    来获取服务器数据的,可能会找不到Vue
    ,所以在这个文件头部,我们再次引入一下:
    import Vue from "vue";

    相关文章

      网友评论

          本文标题:vuex

          本文链接:https://www.haomeiwen.com/subject/izcfpxtx.html