Vuex-demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- npm:node package manager -->
        <!-- vuex:實現vue組件間的數據共享 -->
    </head>
    <body>
   
    <div id="app">
   
    </div>
    <script src='vue.js'></script>
    <script src='vuex.js'></script>
    <template>
    <span v-test='$store.state.msg'></span>
    </template>
    <script>
    Vue.component('test',{
    template:'#test'
    })
    </script>
    <script>
    var store=new Vuex.Store({
    state:{
    msg:'今天星期一'
    },//希望組件之間共享的數據
    getters:{},
    mutations:{},//如果想改state裏面的值,通過mutations更改。裏面放的都是方法
    actions:{}
                //actions也能修改state裏面的值 區別:調用方法不同 mutations用commit actions用dispatch 參數不同:mutations用state actions用context 是否異步:mutations不能異步 actions既能異步也能同步
    });
    var vm=new Vue({
    el:'#app',
    store:store,//後面的爲變量名 前面爲固定的鍵名
    });
    </script>
    </body>
</html>
發佈了39 篇原創文章 · 獲贊 11 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章