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