SSR学习笔记(三) 集成vuex4 创建实例

vuex4

安装vuex

npm install vuex@next --save

初始化 store/index.js

import { createStore } from 'vuex'

export const store = createStore({
  state: {
    count: 1,
  },
  mutations: {
    setCount(state, payload) {
      state.count += payload
      return state.count
    }
  },
  actions: {
    fetchCount({ commit, state }, payload) {
      setTimeout(() => {
        commit('setCount', payload)
      }, 2000)
    }
  }
})

引入vuex main.js

xxxxx
import { store } from './store'
xxxxx

export const createApp = () => {
  xxxxx
  app.use(store)
  return { app, router }
}

测试

<template>
  <div class="home">
    <div>
      <button @click="mutation">mutation</button><br />
      <button @click="action">action</button><br />
      <div>store:{{ store.state.count }}</div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";

const store = useStore()

const mutation = () => {
  store.commit('setCount',1)
}
const action = () => {
  store.dispatch('fetchCount',2)
}
</script>

vuex实例

store/index.js

import { createStore } from 'vuex'

export const createSSRStore = () => {
  return createStore({
    state: {
      count: 1,
    },
    mutations: {
      setCount(state, payload) {
        state.count += payload
        return state.count
      }
    },
    actions: {
      fetchCount({ commit, state }, payload) {
        setTimeout(() => {
          commit('setCount', payload)
        }, 2000)
      }
    }
  })
}

引入vuex

xxxxx
import { createSSRStore } from './store'

xxxxx

export const createApp = () => {
  xxxxx
  app.use(store)
  return { app, router }
}

vue-router实例

router/index.js

xxxxx
export const createSSRRouter = () => {
  return  createRouter({
    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
    routes
  })
}

引入vue-router

xxxxx
import { createSSRRouter } from './router'

xxxxx

export const createApp = () => {
  xxxxx
  app.use(router)
  return { app, router }
}