Vuex 引入與範例

範例1. 如果是<script>引入進vue.js，那就<script>引入vuex

<script src='<https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js>'>

首先，const常數store指向一個新建好的Vuex.Store建構式物件實體

const store = new Vuex.Store({
 state:{
 count:0,
 },
 mutations:{
 addCount(state){
 state.count += 1;
 }
 }
})

Vuex.Store( )帶入一個物件，裡頭有state，state，可以想成存放原本data的資料。接著還有個屬性mutations，裏頭有addCount方法，每次呼叫addCount，它都會接收參數state，並且會把state的count加一

(state.count對應這裡Vuex.Store( )傳入物件的state物件的count值)

ES6物件裡的方法可以寫成

方法名：function(){//...}

簡寫成

function 方法名 (){//...}

別忘記了

接著建立vue實體並綁定DOM

var app = new Vue({
 el:"#app",
 store: store,   //1
 computed:{
 numberView(){   //2
 return this.$store.state.count;
 }
 },
 methods:{
 addCount(){  //3
 this.$[store.commit](http://store.commit)('addCount')
 }
 }
})

1.el綁定#app不解釋，這裡要新增一個store屬性，並且值是常數store指向的Vuex實體

2.接著computed計算屬性有個numberView()方法，它會回傳值，這個值是來自

this.$store.state.count;

this.$store是什麼？

在new Vue實體裡自然是store屬性的store常數(現在指向vuex) 所以.state.count 自然是一開始設定new Vuex.Store時，state的物件count屬性值

const store = new Vuex.Store({
 state:{
 count:0,   //<------這個
 }

3.methods屬性，裡頭有個方法addCount，addCount( )的內容是

this.$[store.commit](http://store.commit)('addCount')

this.$store是new Vue實體裡store屬性的store常數(指向vuex) .commit('addCount’)指的是一開始設定new Vuex.Store時mutations屬性的addCount方法

const store = new Vuex.Store({
 //...上略
 ,
 mutations:{ 
 addCount(state){     // <---------這個
 state.count += 1;
 }
 }
 })

也就是說，呼叫vue實體物件methods屬性的addCount( )方法等於是去呼叫vuex實體裡mutations屬性的addCount方法

接著來看HTML的部分

<div id="app">
 <h1>{{numberView}}</h1>
 <button @click="addCount">+</button>
</div>

id="app”不解釋

<h1>{{ numberView }}</h1>的 numberView 值，是對應 computed 計算屬性的numberView( )方法回傳值，最終會對應到new Vuex.Store物件實體裡的state屬性的count值

<button @click="addCount">+</button>則是點擊時觸發methods屬性的addCount方法而呼叫methods屬性的addCount方法等於是去呼叫vuex實體裡mutations屬性的addCount方法

這樣一來就完成vuex的計數器了！

所以現在，每點擊一次button

1.觸發methods的addCount方法，methods的addCount方法會觸發this.$store.commit('addCount’)，也就是觸發vue物件的store屬性值(指向vuex實體)的addCount方法，然後vuex實體的state屬性的count值會＋1

2.因為vuex實體的state屬性count值變動 vue實體的計算屬性computed回傳給畫面的值(就是對應到vuex實體的state屬性count值)也跟著變動畫面上的數值也跟著變動囉！

範例請見： https://codepen.io/SimonAllen/pen/XELqPE?editors=1011

範例2.

使用vue cli的話專案資料夾終端機下指令

npm install -s vuex

接下來的內容如同範例1，只是利用import、export default等ES6模塊化開發

首先在src資料夾裡新增一個store.js 開頭當然要import進Vue和Vuex，import後要Vue.use(Vuex);使用Vuex


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

Vue.use(Vuex);

const store = new Vuex.Store({
 state:{
 count:0,
 },
 mutations:{
 addCount(state){
 state.count += 1;
 }
 }
});
export default store;

接著const常數store指向一個物件(如同範例1) 最後，最重要的是把常數store給export default匯出

再來，到main.js，把常數store引入進來


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

new Vue({
 store,
 el: '#app',
 render: h => h(App)
})

import進來後，在new Vue內也要註冊store store: store,使用ES6 簡寫，就store,這樣寫就好了

註冊好了後，到app.vue改成這樣

<template>
 <div>
 <h1>{{numberView}}</h1>
 <button @click="addCount">+</button>
 </div>
</template>

<script>
 export default {
 computed:{
 numberView(){
 return this.$store.state.count;
 }
 },
 methods:{
 addCount(){
 this.$[store.commit](http://store.commit)('addCount')
 }
 }
}
</script>

這樣一來就完成vuex的計數器了！

基本上都如同範例1，只是是cli版本！

Written by: