Vuex-全局状态管理【传递参数】
由于 async 异步获取数据,加载页面时,页面会感觉一闪而过的抖动,如果想页面不闪,推荐使用 SSR 【vuex】,由服务端 渲染SSR页面出来。此话记于 2020年01月08号,项目nuxt.js 构建 Vue+Koa+MongoDB 全栈美团项目
src根目录
新建store文件夹,新建index.js 作为入口
在store文件夹中 新建modules文件夹
modules文件夹中,新建 a.js b.js 2个文件
a.js
const state = { money: 10 } const mutations = { // 我这里收到 参数以后,操作state.money的值改变 add(state, param) { state.money += param }, reduce(state) { state.money-- } } const actions = { //这里先接收到参数,我在驱动mutation里的add方法,同时传入参数 Actions_add: ({ commit }, param) => { commit('add', param) }, Actions_reduce: ({ commit }) => { commit('reduce') } } export default { namespaced: true,//命名空间模块 state, mutations, actions }
b.js
const state = { count: 1 } const mutations = { add(state){ state.count++ }, reduce(state) { state.count-- } } const actions = { Actions_add:({commit})=>{ commit('add') }, Actions_reduce:({commit})=>{ commit('reduce') } } export default { namespaced:true,//命名空间模块 state, mutations, actions }
index.js
import Vue from 'vue' import Vuex from 'vuex' import money from './modules/a' import count from './modules/b' Vue.use(Vuex) export default new Vuex.Store({ modules: { money, count } })
* 记得不要忘记在 main.js 中引入
import Vue from 'vue' import App from './App.vue' import store from './store/index' // import store from './store' Vue.config.productionTip = false new Vue({ store, render: h => h(App) }).$mount('#app')
在新建 a.vue \ b.vue 2个组件
a.vue
<template> <div class="container"> <h1>Money</h1> <hr /> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-success" @click="Actions_add(2)">增加2</button> </span> <input type="text" class="form-control" v-model="money.money" /> <span class="input-group-btn"> <button type="button" class="btn btn-danger" @click="Actions_reduce">减少</button> </span> </div> </div> </template> <script> import { mapActions, mapState } from "vuex" export default { methods: { ...mapActions('money',["Actions_add", "Actions_reduce"]) }, computed: { ...mapState([ 'money' ]) } } </script> <style> </style>
b.vue
<template> <div class="container"> <h1>Count</h1> <hr /> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-success" @click="Actions_add">增加</button> </span> <input type="text" class="form-control" v-model="count.count" /> <span class="input-group-btn"> <button type="button" class="btn btn-danger" @click="Actions_reduce">减少</button> </span> </div> </div> </template> <script> import { mapActions, mapState } from "vuex" export default { methods: { ...mapActions('count',["Actions_add", "Actions_reduce"]) }, computed: { ...mapState([ 'count' ]) } } </script> <style> </style>
效果图: