vuex示例

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态（意思就是数据），并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说，vuex就是用来集中管理组件的数据的。

使用vuex的示例

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import modleMall from './Mall.js'

Vue.use(Vuex)

export default new Vuex.Store({
  // 存放数据
  state: {
    msg:"老王"
  },
  // 计算属性
  getters:{  
    description:function(state){
			return state.msg
		}
  },
  // 修改数据
  mutations: {
  },
  // 异步修改数据
  actions: {
  },
  // 选择模型
  modules: {
    modleMall
  }
})

store/Mall.js

export default {
	// 设定当前模块带上名字
	namespaced:true,
	state:()=>({
		mallname:"小米商城",
		type:"屌丝专用"
	}),
	getters:{
		description:function(state){
			return state.mallname +state.type
		}
	},
	mutations:{
		setMallname:function(state,payload){
			state.mallname = payload
		},
		setType:function(state,payload){
			state.mallname = payload
		}
	},
	actions:{
        asyncSetType(content,payload){
            setTimeout(()=>{
                content.commit('setMallname',payload)
            },2000)
        }
	}
}

views/Home.vue

<template>
  <div class="home">
    <div>{{modleMall.mallname}}</div>
    <div>{{mallDes}}</div>
    <input v-model="text">
    <button @click="setMallname(text)">改变名字</button>
     <button @click="setName(text)">异步改变名字</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations, mapActions} from 'vuex'
export default {
  data(){
    return{
      text:""
    }
  },
  computed:{
    // 用对象展开运算符
    ...mapState('modleMall',[mallname]),
    //modleMall中的计算属性description重命名为mallDes
    ...mapGetters('modleMall', {
      mallDes: 'description'
    }),
  },
  methods:{
    // modleMall中的修改数据中setMallname和setType函数进行解构 
    ...mapMutations('modleMall',['setMallname','setType']),
    // modleMall中的异步修改数据中asyncSetType函数进行重命名为setName
    ...mapActions('modleMall',{'setName':'asyncSetType'})

  },
  mounted(){
    console.log(this.$store)
  },
  created(){
    console.log(this.modleMall)
  }
}
</script>