vuex 封装

 

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  store,
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

 

store文件中的index.js

import { MUTATION_ADD_AGE } from './mutation_type'  //01导入
export { MUTATION_ADD_AGE }  //02导出

import Vue from 'vue'
import Vuex from 'vuex'  // 01引入vuex组件
Vue.use(Vuex)            // 02 使用组件

export default new Vuex.Store({
      state:{
        name:'zzh',
        firstname:'周',
        lastname:'浩',
        age:18,
        sex:'man',
        money:99999999999999999999999999999
      },
      getters:{
        /* 
        money_use(state){
           return (state.money/6).toFixed(2)
        },
        allname(state){
           return state.firstname + state.lastname
        }
        */
       money_use: (state) => (state.money/6).toFixed(2),
         allname: (state)=> state.firstname + state.lastname
     
      },
      mutations:{
        [ MUTATION_ADD_AGE ](state,payLoad){ // payLoad: 接收调用传来的参数{num:10}
          state.age += payLoad.num
        },
        setUserInfo(state,info){  // 通过actions中的getUserInfo方法异步请求回用户的信息，在mutation中给state赋值
          state.name  = info.name
          state.firstname = info.firstname
          state.lastname  = info.lastname
          state.age = info.age
          state.sex = info.sex
          state.money = info.money
        },
        setToekn(state,info){

        }
      },

      actions:{
        
        //  async getToken ({ commit }){ //解构 {commit}相当于 context.commit
        //                  var res = await axios.get('./user/getToken.....')
        //                  commit('setToekn',res)
        //                 },

        //  async getUserInfo(context){    //context代表整个store
        //             /*this.$store.commit() = context.commit()
        //             在action里通过操作mutations来改变state里的值。res是axios请求回来的用户数据*/
        //               var token = await context.dispatch('getToken')
        //               var res = await axios.get('./user/geruserinfo.....')
        //               context.commit('setUserInfo',res) 
                      
        // }
        
                 async getUserInfo(context){        
                      context.commit('setUserInfo',{
                        name : '周中浩',
                        firstname : '周',
                        lastname  : '中浩',
                        age : 18,
                        sex : '男',
                        money: 888888888888888888888888
                      })          
        }
      }
})

 

 

mutation_type.js

export const  MUTATION_ADD_AGE = 'addAge'

 

 

 

组件调用vuex中的方法属性

<template>
      <div>
            {{name+'-'+age+'-'+sex}}----{{money_use}}--{{allname}}
             <el-button type="primary" @click='addAge({num:10})'>add</el-button>
      </div>
</template>

<script>
import { MUTATION_ADD_AGE } from '@/store'
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
export default {
      computed:{
            ...mapState(['name','age','sex']),
            ...mapGetters(['money_use','allname'])
      },
      created(){
           this.getUserInfo()
      },
      methods:{
            // addAge(){
            //       this.$store.commit('addAge',{num:10})
            // },
            ...mapMutations([MUTATION_ADD_AGE]), // this.$store.commit()
            ...mapActions(['getUserInfo'])   // this.$store.dispatch()
      }
}
</script>

<style>

</style>

 

 

<template>
      <h1>
            {{gender}}--{{age}}
      </h1>
</template>

<script>
export default {
      computed:{
            gender(){
                  return this.$store.state.name
            },
            age(){
                  return this.$store.state.age
            }
      }
}
</script>

<style>

</style>