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


# 概要
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
```

***
# 実装など
　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: {
    }
}
```