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)