1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-23

概要

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?