import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
// vuex是vue官方提供的用状态管理器，可以集中式的管理应用中所有的组件状态，更改数据的状态
// 更改vuex数据的方式；1.使用commit来触发mutations中的方法来更改数据的状态
//                    2.直接更改数据中的
const state = {   // state:store中存储的公共数据
    baseInfo:{  // state里面的数据可以直接通过接口获取
        name:‘zhangsan‘,
        age:23

    }
}
const mutations = {  // mutations:用commit来触发mutations中的方法，从而触发数据更新
    changeName(state,value){
        state.baseInfo.name = value
    },
    changeAge(state,value){
        console.log(state)
        state.baseInfo.age += value
    }
}
// const commit = {}
const getters = {   // 在每次数据更新前做的操作
    changeAge:function(state){
        return state.baseInfo.age + 1
    }
}
const store = new Vuex.Store({
    state,
    mutations,
    getters
})  
export default store  // 导出store状态，方便的main.js中引入，

import Vue from ‘vue‘
import App from ‘./App.vue‘
import store from ‘./vuex/index‘

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store   // 把 store 对象提供给 “store” 选项，把 store 的实例注入所有的子组件
}).$mount(‘#app‘)

<template>
  <div class="hello">

    {{this.info.name}}     <!-- 2.读取计算属性 -->

    {{this.info.age}}
    <br>
    <button @click="chanAge">更改年龄</button>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data(){
    return{
    }
  },
  computed:{
    info(){  // 将store中的baseInfo数据生成为计算属性，在view中可以直接使用{{this.info.name}}

　　　　return this.$store.state.baseInfo
    }
  },

  methods:{
    chanAge(){   // 更改数据

this.$store.commit(‘changeAge‘,10)
    }
  }
}
</script>

<template>
  <div class="hello">
    {{this.info.name}}  <!--1.读取计算属性 -->
    <br>
    {{this.infoAlias.age}}  
    <br>    
    {{this.infoPlusLocalState}}
    <br>
<!-- 2.mapState传入字符串数组后可以这样使用 -->
    {{this.baseInfo.name +‘ 年龄：‘+ this.baseInfo.age}}
<!-- 3.使用...将计算属性合并为一个对象 -->
    <br>
    {{this.Count}}
    <button @click="chanAge">更改年龄</button>
  </div>
</template>

<script>
import { mapState } from ‘vuex‘  // 从vuex中引入mapState方法
export default {
  name: ‘HelloWorld‘,
  props: {
    msg: String
  },
  data(){
    return{
      localCount:100
    }
  },

  // 1.当组件需要获取多个状态时，一个个将其声明为计算属性会很重复和多余，可以用mapState辅助函数来帮我们生成计算属性
  computed:mapState({
    info:state => state.baseInfo,
    infoAlias: ‘baseInfo‘,
    infoPlusLocalState (state) {
      return state.baseInfo.name + this.localCount
    }
  }),

// 2.当计算属性和state中的数据同名可以直接传入一个数组
computed:mapState([‘baseInfo‘]),

  // 3.当组件中还有其他计算属性时，需要将state的计算属性和其他的计算属性合并为一个对象（mapState返回的是一个对象）
  // 此时就可以使用扩展运算符...
  computed:{
    Count(){
      return this.localCount + ‘count‘
    },
    ...mapState([‘baseInfo‘])
    },
  methods:{
    chanAge(){
      this.$store.commit(‘changeAge‘,10)  // 更改数据
    }
  }
}
</script>