Vue.js/Vuex/HelloWorld

概ねこういいうことになる。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloVuex</title>
    <!-- Vue を読み込む -->
    <script src="https://unpkg.com/vue@latest"></script>
    <!-- Vue の後に Vuex を読み込む -->
    <script src="https://unpkg.com/vuex@latest"></script>
</head>
<body>
    <!-- el のターゲット -->
    <div id="app">
    </div>
    <script>
        // store を作成する
        // こいつでアプリ上のすべての情報を保持する
        var store = new Vuex.Store({
            // データの実体
            state: {
                hoge: 0,
                piyo: "abc"
            },
            // データを操作する関数群
            mutations: {
               doHoge: function(state, v){
                   state.hoge += v;
               },
               doPiyo: function(state, v){
                   state.piyo = v;
               }
            },
            // データを抽出する関数群
            getters:{
                fuga: function(state){
                   return state.piyo + " " + state.piyo;
                }
            },
            // データ操作に対する統合的な操作
            actions: {
                doHogeAction: function(ctx, v){
                    ctx.commit('doHoge', v);
                }
            }
        });
        // データにはこのようにアクセスするが読み取り専用
        console.log(store.state.hoge);
        console.log(store.state.piyo);
        // 操作メソッドを通じてデータを書き換える
        store.commit("doHoge", 100);
        console.log(store.state.hoge);
        console.log(store.getters.fuga);
        // action はこのように使う
        store.dispatch("doHogeAction", 123);
 
        console.log(store.state.hoge);
        // コンポーネントと連携させる
        var vm = new Vue({
            el: "#app",
            // store を内部に保持する
            store: store,
            template: '<div v-on:click="plushoge"> {{hoge}} </div>',
            computed: {
                // store 上のデータは算出プロパティによってテンプレートにバインドする 
                hoge: function(){
                    return this.$store.state.hoge;
                }
            },
            methods: {
                // その操作は method として実装
                plushoge: function(){
                    this.$store.commit("doHoge", 20);
                }
            }
        });
    </script>
</body>
</html>

このように store という全体で1個しかないデータにそれ専用の関数を使うことによってアクセスする設計が Vuex。

javascript/vuejs/vuex/helloworld.txt · 最終更新: 2018-11-19 21:20 by ore

文書の先頭へ

Vue.js/Vuex/HelloWorld

menu

書いてる野郎

Vue.js/Vuex/HelloWorld