Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

state属性

在store文件在创建 index.js文件

/**1.注入插件 Vuex*/

import  Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);

/** 2创建一个 vuex 实例 仓库 store*/
 var store = new Vuex.Store({
    /**state公共数据 */
    state:{
        count:0
    }

});
 export  default store

在App.vue中使用

import {mapState} from "vuex";
  /**  步骤 3实例注入 vuex 仓库 store*/
  export default {
    store:store,
    components: {About, Home, JieJie, GeGe},
    mounted(){
      console.log(this.$store.state.count);
    },
    /** 助手函数 */
    // computed:mapState(['count'])
    computed:mapState({name:'count'})
  }

助手函数 :mapState

*属性扩散(扩张)浅拷贝

var obj= {a:1,b:2}
var myobj = {...obj,c:3 }
  console.log(myobj); 
//{a: 1, b: 2, c: 3}

如果组件要改变state的数据 都是要同过 commit方法 触发Vuex.Store中的 mutations 方法来执行的 .

methods:{
      add(){
        this.$store.commit('oAdd',3)
      }

在Vuex.Store 的mutations写一个函数

 mutations:{
        oAdd(state,payload){
            state.count+=payload
        }
    }

改变state 的数据 不可以越级

助手函数 mapMutations