knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Vuex の初級編 #Vue.js #vuex

Vue.js javascript

index:

概要:

Vuex の初級編的な内容で
Vue CLI で実装例となります。

・ components間で、prop等で
　値を受け渡した時に。反映できない場合がありましたので
　vuexに、変更してみました。

環境

Vue CLI
vuex : 3.4.0
vue: 2.6.11

参考

https://vuex.vuejs.org/ja/

https://qiita.com/okumurakengo/items/0521049e79f927632cab

vuex 追加

npm install vuex --save

package.json

https://github.com/kuc-arc-f/vuex_sample_1/blob/master/package.json

実装など

　getters, mutations を定義しています。

・store.js
https://github.com/kuc-arc-f/vuex_sample_1/blob/master/src/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//
export default new Vuex.Store({
    state: {
        products: [
            { id: 1, name: "Hoge", stock: 0 },
            { id: 2, name: "Fuga", stock: 3 },
            { id: 3, name: "Piyo", stock: 0 },
        ],
        tasks:[],
        count: 5,
    },
    getters: {
        depletedProducts: state => {
            return state.products
        },
        getTasks: state => {
            return state.tasks
        }
    }, 
    mutations: {
        increment(state) {
            state.count++
        },
        setTasks(state, payload) {
            state.tasks = payload.tasks
        }
    },
})

・main.js
store　を、読み込んでいます

import Vue from 'vue'
import router from './router'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

//
new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

components

・読込、computed　で、getters　からstore.js
で、設定した。固定値を取得

・this.$store.getters.定義した取得関数で、読めるので
　importなして。グローバル参照が可能でした

TestVuex.vue

https://github.com/kuc-arc-f/vuex_sample_1/blob/master/src/components/TestVuex.vue

export default {
    created(){
        console.log( "count =" + this.$store.state.count )

    },
    computed: {
        depletedProducts() {
            return this.$store.getters.depletedProducts;
        }
    },
  methods: {
    updateCount() {
      this.$store.commit("increment");
    }
  }        
}


・表示の部分

<template>
    <div>
        <h1>TestVuex.vue</h1>
        Test-1:
        <p>Count: {{ $store.state.count }}</p>
        <button @click="updateCount">increment</button>
        <hr />
        depletedProducts:
        <ul>
            <li v-for="(product, i) in depletedProducts" :key="i">
                name: {{ product.name }}
                , ID : {{ product.id }}
            </li>
        </ul>        
    </div>
</template>

親/子 components で、読み書きする場合

・親、TestVuex_2.vue
https://github.com/kuc-arc-f/vuex_sample_1/blob/master/src/components/TestVuex_2.vue

mutations　で、commitします（ this.$store.commit('setTasks', {'tasks' : items } ) ）

import {Mixin} from '../mixin'
import TestChild from '../components/Element/TestChild'

//
export default {
    mixins:[Mixin],
    components: { TestChild },
    created(){
        console.log( "count =" + this.$store.state.count )
        this.updateTask()
    },
    methods: {
        updateCount() {
            this.$store.commit("increment");
        },
        updateTask() {
            var items =       [
                { 'id' : 1,  'name' : 'n1'},
                { 'id' : 2 , 'name' : 'n2'},
                { 'id' : 3 , 'name' : 'n3'},
            ]
            this.$store.commit('setTasks',  {'tasks' : items }  )
        },    
    }        
}

・子、TestChild.vue
https://github.com/kuc-arc-f/vuex_sample_1/blob/master/src/components/Element/TestChild.vue

computed , getters で、読み込み ( this.$store.getters.getTasks; )

import {Mixin} from '../../mixin'
//
export default {
    mixins:[Mixin],
    created () {
// console.log( "uid=" + this.user_id )        
    },
    computed: {
        getTasks(){
            return this.$store.getters.getTasks;
        }
    },    
    methods: {
    }
}

参考のコード

github.com





.