npm install vuex --save-dev

import Vuex from ‘vuex‘;

Vue.use(Vuex);

const vuex_store = new Vuex.Store({

state:{ user_name:"" },

mutations:{

showUserName(state){

alert(state.user_name);

}

} })

let myvue = new Vue({

el:".container",

store:vuex_store, //註入到vue router:routerConfig,

});

<template>

<div class="form-group">

<label class="col-sm-2 control-label">用戶名</label>

<div class="col-sm-10">

<input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">

</div>

</div>

</template>

<script>

export default{

props:["placeholder"],

data:function () {

return { username:"" }

},

methods:{

userNameChange(){

//this.$emit("childChange","username",this.username)

this.$store.state.user_name = this.username; }

}

}

</script>

當點擊提交按鈕時候，彈出用戶名
user-submit.vue：

<template>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <button type="button" v-on:click="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</template>

<script>
    export default{
        methods:{
            submit(){
                //alert(this.$parent.$data.username +"==="+ this.$parent.$data.userarea);
                this.$store.commit("showUserName");
            }
        }
    }
</script>
 

從服務器獲取數據

news-list.vue:

    export default{
        created(){
            if (this.$store.state.newslist.length == 0){
                // 請求服務器獲取數據
                this.$http.get("http://localhost/news.php").then(function (res) {
                    this.$store.state.newslist = res.body;
                },function (res) {
                    // 請求失敗處理
                })
            }
        }
    }

組件生命周期（創建）裏請求服務器獲取數據，然後保存到了state 裏:

this.$store.state.newslist = res.body;

newslist 在實例化Vuex.Store 的時候定義，入口文件index.js裏:

    state:{
        user_name:"",
        newslist:[]
    },

組件模板上就要這樣循環了：

v-for="news in this.$store.state.newslist"

數據過濾

處理服務器返回來的數據，比如我們這裏news.PHP 的返回的json數據:

[{"id":101,"pubtime":"2016-10-29","title":"探索之路","desc":"是手機團隊的探索之路","isdeleted":false},{"id":102,"pubtime":"2016-10-29","title":"排行榜","desc":"如何支持業務接入？選擇什麽存儲引擎？","isdeleted":false},{"id":103,"pubtime":"2016-10-29","title":"大文件存儲","desc":"講大型二進制文件存儲，只包含那些文件的輕量級引用","isdeleted":true}]

我們要根據isdeleted 做數據過濾，不多說，先看代碼：

import Vuex from ‘vuex‘;
Vue.use(Vuex);

const  vuex_store = new Vuex.Store({
    state:{
        user_name:"",
        newslist:[]
    },
    mutations:{
        showUserName(state){
            alert(state.user_name);
        }
    },
    getters:{
        getNews(state){
            return state.newslist.filter(function (news) {
                return !news.isdeleted;
            })
        }
    }
}

getters 專門寫了一個方法，做了數據過濾處理，保留isdeleted為false 的記錄。 

那麽我們在組件模板上循環的時候也要修改一下了：

v-for="news in this.$store.getters.getNews"



操作vuex數據

點擊“點贊”按鈕，就更改點擊數。
其實就是更改newsdetail 裏的agree 屬性。

本文參考文檔：https://vuefe.cn/vuex/actions.html

import Vuex from ‘vuex‘;
Vue.use(Vuex);

const  vuex_store = new Vuex.Store({
    state:{
        user_name:"",
        newslist:[],
        newsdetail:{}
    },
    mutations:{
        showUserName(state){
            alert(state.user_name);
        },
        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;
            })
        }
    }
})

news-detail.vue 組件全部代碼：

<template>
    <div class="news-detail">
        <div class="row">
            <div class="page-header">
                <h2>{{this.$store.state.newsdetail.title}}<small>{{this.$store.state.newsdetail.pubtime}}</small></h2>
                <p>點贊數:{{this.$store.state.newsdetail.agree}} <button class="btn btn-success" @click="submitAgree">點贊</button></p>
                <p>{{this.$store.state.newsdetail.desc}}</p>
            </div>
        </div>
    </div>
</template>



<script>
    export default{
        // 創建的時候[生命周期裏]
        created(){
            this.$http.get("http://localhost/newsdetail.php?id="+this.$route.params.newsid).then(function(res){
                this.$store.state.newsdetail = res.body;
            },function(res){
                // 處理請求失敗
            });
        },
        methods:{
            submitAgree(){
                // 組件了調用actions裏定義的agree方法
                this.$store.dispatch("agree",this.$store.state.newsdetail.id)
            }
        }
    }
</script>

後臺增加點贊數


將多個模塊組件分開引用

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.之後我們需要修改組件 

需要修改此處的代碼，需要加上我們的模塊名，修改之後：

<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>

NewsModule.js中，我們是通過Vue.http.post() 來獲取服務器數據的，可能會找不到Vue，所以在這個文件頭部，我們再次引入一下：

import Vue from "vue";

vuex