How does MPVue use Vuex

First, let me ask you a question. Vue is a single page application. Why can VUex be used in multiple pages of applets?

A: Although the applet is multi-page, the multi-page applet mainly means that the view layer is multiple WebViews, independent of each other, but js is all in the same execution environment, so vuex can be used directly in MPVue to manage state.

After solving this confusion, do you still have a question, can MPVue directly use Vuex? Do I need to configure anything?

Answer: VuEX is bound to use some auxiliary functions related to VUex, such as mapGetters, mapMutations, etc.

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

import store from './store'
Vue.config.productionTip = false
App.mpType = 'app'const app = new Vue({ ... App, store }) app.$mount(a)Copy the code

Vuex: vuex: vuex: vuex: vuex: vuex: vuex: vuex: vuex: vuex: vuex: vuex: vuex

​

Problem analysis:

(1) In general vue-cli + vuex projects, the main function main.js will provide the store object with the “Store” option, so that the store object instance can be injected into all the child components. This.$store.state. XXX, this.$store.dispatch, etc.

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

(2) In the MPvue + vuex project, it is unfortunate that we cannot inject the store object instance into every child component in this way (at least I tried N configurations), that is, we cannot use this.$store. XXX in the child component, and therefore the helper function is not used correctly. In this case, we need to change the way we implement this.$store in every child component. Since we need to access the store instance with this.$store in the child component, we can simply add the $store attribute to the vue prototype to point to the store object with one line of code:

Vue.prototype.$store = storeCopy the code

That is:

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

import store from './store'
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'const app = new Vue({ ... App, store }) app.$mount(a)Copy the code

As you can see, the auxiliary function is already in effect:

​

Finally, here is a tip that can be used to view vuEX data for easy bug detection:

• Add vuex’s built-in print function to index.js in the store directory as follows:

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

import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'Vue.use(Vuex) const debug = process.env.NODE_ENV ! = ='production'

export default new Vuex.Store({
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})Copy the code

• This allows us to see the data state we want to change in real time on the console.

Conclusion:

Work, we need to extrapolate, can draw lessons from the things, we try to be brave, I believe that after reading this article, to vuex questions used in the small program are eliminated, mpvue + vuex use everyone must have mastered, welcome everybody to give me a message if you have any questions, learn from each other communication, to make progress together!