1.安装vuex依赖
2.在src下创建store文件夹,下方创建index.js文件,引入vuex,vue
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
2.1 在main.js引入store
import store from './store/index.js'
new Vue({
router,
axios,
store,
render: h => h(App),
}).$mount('#app')
3.创建getters.js文件,用作getters数据
visualization: state => state.user.visualization,
}
export default getters
4.创建modules文件夹,用于存放数据
const state = {
visualization:{}
}
const mutations = {
SET_VISUALIZATION: (state, visualization) => {
state.visualization = visualization
},
}
const actions = {
visualization({ commit }, visualization) {
commit('SET_VISUALIZATION', visualization)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
5.使用
存储数据: modules下的文件名称user / 存储的数据名, 需要存储的数据
this.$store.dispatch('user/visualization', val.formList)
读取数据:
this.$store.getters.visualization