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
}
}
