vuex里mapState,mapGetters使用详解

/*getter是state的get方法,没有get页面就获取不到数据

获取页面:
import {mapGetters,mapActions} from 'vuex'
 <h1>{{count}}</h1>
computed:mapGetters([
 'count'
 ]),

store.js:

var state = {
 count:6
},
var getters={
 count(state){
  return state.count
 }
}

改变数据页面:
<button @click="increment">增加</button>
methods:mapActions([
 //该 increment 来自 store.js 中导出的 actions 和 mutations 中的 increment 
 'increment',
 ])

先发给action:
const actions ={
 // ({commit,state}) 这种写法是 es6 中的对象解构
 increment({commit,state}){
  //提交一个名为 increment 的变化,名字可自定义,可以认为是类型名,与下方 mutations 中的 increment 对应
  //commit 提交变化,修改数据的唯一方式就是显式的提交 mutations
  commit('increment') 
 }
}
再发给mutations:
const mutations ={
 //与上方 commit 中的 ‘increment' 相对应
 increment(state){
  state.count ++;
 }
}
*/


https://cloud.tencent.com/developer/article/1474033

posted @ 2022-01-07 20:53  porter_代码工作者  阅读(105)  评论(0编辑  收藏  举报