Vuepress: Personally, is it possible to install Vuex in a project with Vuepress, how and where do I do it?

[farnetani]

Feature request

What problem does this feature solve?

Personally, is it possible to install Vuex in a project with Vuepress, how and where do I do it?

What does the proposed API look like?

Use Vuex in my project to create a login/auth in private documentation

How should this be implemented in your opinion?

With Vuex

Are you willing to work on this yourself?

Yes!

[Shigma]

So this is a question rather than a feature request......

You can install Vuex with enhanceAppFiles.

[farnetani]

Thanks, below an example of what I wanted, I got through authentication via vuex.

import Vuex from 'vuex'
import store from '../../store/index'
import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from "vue-router"

export default ({
    Vue,
    options,
    router,
    siteData
}) => {
    Vue.use(Vuex),
    Vue.use(ElementUI),
    Vue.use(VueRouter)
    Vue.mixin({store: store}) // Activate o vuex
}

Other example: https://github.com/sakokazuki/vuepress-test/blob/0.0.5/app/.vuepress/enhanceApp.js

store/index.js

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

// Modules
import auth from './modules/auth'

const modules = {
  auth
}

Vue.use(Vuex)
export default new Vuex.Store({
  modules
})

[TonyThorne]

This worked for me, thanks.
I had make a small change to my store.js
Changed the export in the store from:
export const store = new Vuex.Store({..
to
export default new Vuex.Store({..

I am not sure what the mixin does here, but it works, so I am happy

[staghouse]

This issue was a god send. enhanceApp.js currently does not support async data fetching so Vuex was my likely solution. Here is an example of async data on initial render of a component/page for the global state that does not re-fetch on route change and loads initially on page refresh (currently a problem with enhanceApp.js async fetching when working locally).

enhanceApp.js

import Vuex from 'vuex';
import store from './store';

export default ({ Vue }) => {
  Vue.use(Vuex);
  Vue.mixin({ store: store });
};

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import fetch from 'node-fetch'; // or your preferred method

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    example: [],
  },
  getters: {
    example: state => state.example,
  },
  actions: {
    UPDATE_EXAMPLE: async ({ commit }) => {
      try {
        const awaited = await fetch('https://myexample.com/file.json');
        const promised = await awaited.json();

        commit('SET_EXAMPLE', promised); // In nuxt we would have to return this for asyncFetch
      } catch (err) {
        console.error(err);
      }
    }
  },
  mutations: {
    SET_EXAMPLE: (state, data) => {
      state.example = data;
    },
  },
});

example.vue

<script>
export default {
  name: 'Example',
  async created() {
    if(this.$store.getters.metadata.length < 1){
      await this.$store.dispatch('UPDATE_METADATA');
    }
  },
  computed: {
    example() {
      return this.$store.getters.example;
    },
  },
};
</script>

As an addendum, I came to this because i needed static state on the global level and component level fetching would just re-render on route change which is why enhanceApp.js is a go-to for storing static global state. This is slated, hopefully, to be fixed via: https://github.com/vuejs/vuepress/pull/2075/commits/aa37a27681ffcb286359858a9717ad6e78560fd7

[favoyang]

@staghouse thanks for the tip. Is there a way to use vuex-persistedstate with your example code?

I'm changing store.js to

...
import createPersistedState from "vuex-persistedstate";
...
export default new Vuex.Store({
  plugins: [createPersistedState()],
...

However, I'm getting an error when building for production.

ReferenceError: window is not defined
    at vuex_persistedstate_es (node_modules/vuex-persistedstate/dist/vuex-persistedstate.es.js:1:1509)
    at Module.<anonymous> (docs/.vuepress/theme/store.js:11:12)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.<anonymous> (server-bundle.js:25925:18)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at server-bundle.js:118:18
    at Object.<anonymous> (server-bundle.js:121:10)

It seems related to browser-api-access-restrictions.

Update: figured out that you can use isServer flag from the enhanceApp to control the vuex-persistedstate plugin.