vuex管理状态仓库使用详解

<template>
 <div id="app">
   <Fruits :fruitList="fruitList"/>
 </div>
</template> 
<script>
import Goods from './components/Goods';
export default {
 name: 'App',
 components:{
  Fruits,
  Goods
 },
 data(){
  return{
   goodList:[
   {
    name:'doll',
    price:12
   },
   {
    name:'glass',
    price:10
   }
  ],
  }
 }
}
</script>
<style>
</style>

<template>
 <div class="hello">
   <ul>
    <li v-for="(good,index) in goodList" :key="index">
     name:{{good.name}} number: {{good.number}} {{index}}
    </li>
   </ul>
 </div>
</template>

<script>
export default {
 props:['goodList'],
}
</script>
<style>

</style>

//创建并暴露vue
import Vue from 'vue';
export default new Vue

<template>
 <div>
    <button @click="deliver">点击</button>
 </div>
</template>

<script>
import MSG from '../msg';
export default {
 data(){
  return{
   msg:'hahah'
  }
 },
 methods:{
  deliver() {
    MSG.$emit('showMsg',this.msg)
  }
 }
 
}
</script>
<style>

</style>

<template>
 <div>
    <button @click="deliver">点击</button>
 </div>
</template>

<script>
import MSG from '../msg';
export default {
 data(){
  return{
   msg:'hahah'
  }
 },
 methods:{
  deliver() {
    MSG.$emit('showMsg',this.msg)
  }
 }
 
}
</script>
<style>

</style>

import Vue from 'vue';  //引入vue
import Vuex from 'vuex'; //引入vuex

Vue.use(Vuex) //声明使用Vuex

const state = {
  count:1,
  totalName:'total'
}

const store = new Vuex.Store({
  state
 })
 export default store

<template>
 <div id="app">
   <Fruits>
   <div>--------------------------</div>
   <Goods>
 </div>
</template> 
<script>
import Fruits from './components/Fruits';
import Goods from './components/Goods';
export default {
 name: 'App',
 components:{
  Fruits,
  Goods
 }
}
</script> 

<style>

</style>

<template>
 <div>
  <div>我是Goods中的组件</div>
   <div>我们共同的数字:{{this.count}}</div>
  <div>我们共同的名字是 {{this.totalName}} </div>
 </div>
</template>
<script>
import {mapState} from 'vuex'; //引入辅助函数
export default {
  computed:{
   ...mapState(['count','totalName']) //对象展开运算符
  } 
}
</script>
<style>

</style>

<template>
 <div>
  <div>我是Fruits中的组件</div>
  <div>我们共同的数字:{{this.count}}</div>
  <div>我们共同的名字是 {{this.totalName}} </div>
 </div>
</template>

<script>
import {mapState} from 'vuex';  //引入辅助函数
export default {
  computed:{
    ...mapState(['count','totalName'])  //对象展开运算符
  }
}
</script>

<style>

</style>

/*
  vuex最核心的管理对象store
*/
import Vue from 'vue';
import Vuex from 'vuex';

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

//声明使用插件
Vue.use(Vuex)
//new 一个Vuex的对象,将state,mutation,action,getters配置到vuex的store中,方便管理数据
export default new Vuex.Store({  
  state,
  mutations,
  actions,
  getters,
})

/* 
  状态对象
*/
export default{
  userInfo: {}, //用户信息
  count:1
}

/* 
  包含n个mutation的type名称常量
*/
export const RECEIVE_USER_INFO = 'receive_user_info'  //接收用户信息

/* 
  通过mutation间接更新state的多个方法的对象
*/
import {
  RECEIVE_USER_INFO,   //引入在mutation-types定义的常量
} from './mutation-types';

import {
  reqUserInfo,
} from '../api';   //这里引入发送ajax请求的方法

export default{
  // 异步获取用户信息
  async getUserInfo({commit}){
  //引入发送请求数据的方法,异步等待获取数据，并将其数据赋值给result
    const result = await reqUserInfo() 
    //当获取数据成功时，result.code会为0，失败则为1，这里用于判断是否获取状态数据成功
    if (result.code === 0) { 
      const userInfo = result.data //获取请求中的数据
      //通过commit将其方法，和请求后获取的用户信息传递给mutation
      commit(RECEIVE_USER_INFO,{userInfo}) 
    }
  }
}  

this.$store.dispatch('getUserInfo')

this.$store.commit('increment')	

/* 
  直接更新state的多个方法的对象
*/

import {
  RECEIVE_USER_INFO,
} from './mutation-types';

export default{
//方法中的第一个默认形参为state,也可以传入额外的参数，
既mutation的载荷(playload)
  [RECEIVE_USER_INFO](state,{userInfo}){
    state.userInfo = userInfo
  },
  //不通过actions直接在mutation模块中更改state状态数据
  increment(state){
    state.count = 3
  }
}

this.$store.getters.totalCount()

/* 
  包含多个基于state的getter计算属性的对象 
*/
export default{

  plusCount(state){
    return state.count + 1
  },
 //获取state中状态数据对象，和获取getters模块中plusCount数据
  totalCount(state,getters){
    return getters.plusCount + state.count
  }
  
}

//首先我们需要先将辅助函数引入
import { mapGetters,mapState } from 'vuex'

export default {
 computed: {
 // 使用对象展开运算符将 getter 混入 computed 对象中
  ...mapGetters(['plusCount','totalCount',])
 // 使用对象展开运算符将 state 混入 computed 对象中
 	...mapState(['userInfo','count'])
 }
}