npm ninstallvuex--save
1.现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件。
conststate={ count:1}
2.用export default 封装代码，让外部可以引用。
export default new Vuex.Store({ state})
3.在其他组件可以引用
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
4.在store.js文件中加入两个改变state的方法。
const mutations={ add(state){state.count++; },
reduce(state){state.count--; }}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
{{msg}}
{{$store.state.count}}
第二节: state 访问状态对象
一、通过computed的计算属性直接赋值*
computed:{
count(){ return this.$store.state.count; }
}
二、通过mapState的对象来赋值
import{mapState}from'vuex';
computed:mapState({count:state=>state.count })
** 三、通过mapState的数组来赋值
computed:mapState(["count"])
第三节 Mutations 修改状态
const mutations={ add(state,n){state.count+=n; }, reduce(state){state.count--; }}
import{ mapState,mapMutations }from'vuex';
第四节 getters 计算过滤操作
我们首先要在store.js里用const声明我们的getters属性
const getters = { count:function(state){ returnstate.count +=100; }}
export default new Vuex.Store({ state,mutations,getters})
computed:{ ...mapState(["count"]),count(){returnthis.$store.getters.count; }},
