Vuex の初級編 Vue CLI版 #Vue.js #vuex

概要

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

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

---

構成

Vue CLI
vuex : 3.4.0
vue: 2.6.11

参考

vuex 追加

npm install vuex --save

---

実装など

　getters, mutations を定義しています。
・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

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

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

・表示の部分

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

親/子 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()
//        console.log( this.getTasks )
    },
    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

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: {
    }
}