关于vuex

标签：count state 关于 action vuex store addCount

state:{
  count:0
}
// 原始形式调用时插值表达式形式
<div>{{$store.state.count}}</div>
赋值函数形式是在computed中
important {mapStatte} from'vuex'
computed:{
 ...mapState['count']
  count(){
    return:this.$store.state.count
  }
}

1 // 修改state
2 mutations:{
// es5
// addcount:function(）{}
// es6
// state指的是当前vuex中的state对象
// payload 载荷提交mutation时传递的参数
3   addCount(state，payload){
4      state.count +=  payload
5   }
6 }
// 直接调用形式
this.$store.commit('addCount',10)
// 辅助函数形式 在methods中调用mapMutations
important {} from 'vuex'
methods:{
 // addCount(){
 //  this.$store.commit('addCount')
// }
  ...mapMatations['addcount'] // 此时方法中就会有一个对应的addCount方法
}

// action 异步动作 
actions:{
   // action 参数 context 相当于 组件中的this.$store stroe的运行实例
   getAsyncCount(){
// 模拟异步请求
      setTimeout(()=>{
         context.commit('addCount',123)
      },1000)
  }
}

// 原始形式调用action 
// diapatch 调用action
// dispatch(action名称，传递参数)
this.$store.dispatch('getAsyncCount')

// 辅助函数调用
 important mapActions(['getAsynCount'])
methods:{
  ...mapActions(['getAsynCount']) // 相当于在方法中有一个getAsynCount
}

getters:{
  // 放置所有的vuex的计算属性
  // state 指的就是当前store中的state
// es5
 //   filterList:function(state){
  //     state.list.filter(item =>item>5)
  //  }
// es6 写法
     filterList:state => state.list.filter(item =>item>5)
}
原始调用形似
<div>{{$store.getters.filterList}}</div>
辅助函数形式---mapGetters
important {mapGetters} from 'vuex'
computed:{
  ...mapGetters(['filterList'])
}

 

// 模块化

 

 读取子模块的state

 

 

 

 

 

// 命名空间 nameSpaced

 

 

 

 

 

 

 

 

 

 

 

标签：count,state,关于,action,vuex,store,addCount
From： https://www.cnblogs.com/harryzong/p/17180503.html