vue框架提供了自身的状态管理工具vuex,如何方便引入vuex在vue项目中,博主在最近项目中的引入方式如下。

1. 入口文件main.js

import Vue from 'vue'
import Layout from './layout'
import router from './router'
// 引入vuex
import store from './store/store'

vue实例中

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { Layout },
  template: '<Layout/>'
})

2. 在store文件夹下,创建store.js


store.js中设置

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

Vue.use(Vuex)

const state = {
  pjtnews: 0,
  count: 1
}

const mutations = {
  add(state) {
    state.count += 1;
  },
  reduce(state) {
    state.count -= 1;
  }
}
export default new Vuex.Store({
  state,
  mutations
});

具体vuex如何使用,参照官方文档 https://vuex.vuejs.org/zh/guide/


Logo

前往低代码交流专区

更多推荐