Vuex之整合

安裝 vuex

npm i vuex -S

建立資料夾

建立 client/ store/

建立 client/store/store.js 應用入口

宣告 store

// store.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    updateCount (state, num) {
      state.count = num
    }
  }
})

export default store
複製程式碼

store 的引入

// index.js 應用入口（最外層）
import Vuex from 'vuex'
import store from './store/store'  // 引入

Vue.use(Vuex)

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
  router, 
  store, // 註冊
  render: (h) => h(App)
}).$mount(root)
複製程式碼

store 的使用

顯示 store 資料

// app.vue 根元件
<template>
  <div id="app">
    <p>{{count}}</p> // 顯示 0
</template>

<script>
export default {
  mounted () {
    console.log(this.$store)
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
</script>
複製程式碼

元件內部，呼叫 $store 的 commit 方法，修改 mutation

// app.vue 根元件
<template>
  <div id="app">
    <p>{{count}}</p> // 每秒加 1
</template>
<script>
    mounted () {
        console.log(this.$store)
        let i = 1
        setInterval(() => {
          this.$store.commit('updateCount', i++)
        }, 1000)
      },
      computed: {
        count () {
          return this.$store.state.count
        }
      }
</script>
複製程式碼

修改宣告的 store

和 vue-router 類似，export 時，需要是一個 function，因為服務端渲染，每次渲染都會新生成一個 store，不能使用同一個 store，使用同一個 store 會有記憶體溢位的問題。

import Vuex from 'vuex'

export default () => {
  return new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      updateCount (state, num) {
        state.count = num
      }
    }
  })
}

複製程式碼

對應修改入口檔案 store 的引入

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

import createStore from './store/store'

Vue.use(Vuex)

const store = createStore()

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
  store,
  render: (h) => h(App)
}).$mount(root)
複製程式碼