Vuex核心内容(一)

vuex状态管理有5个核心内容: state、mutation、action、getter以及module

一、state

state提供唯一的公共数据源，所有共享的数据都要统一放到store中的state中进行存储。

实例

//index.js
const store = new Vuex.Store({
  state: {
    count:0
  }
})

组件访问state中数据的第一种方式： this.$store.state.xx

// 组件中引入：
<h3>当前最新的count值为：{{this.$store.state.count}}</h3>

组件访问state中数据的第二种方式：

1. 从vuex中按需导入mapState函数 import { mapState } from ‘vuex’
2. 通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

<h3>当前最新的count值为：{{count}}</h3>
<script>
import  {mapState}  from 'vuex'
export default {
  data () {
    return {

    };
  },
  computed:{
		...mapState(['count'])
  }
}
</script>

二、mutation

• 只能通过mutation变更store数据，不可以直接操作store中的数据
• 通过这种方式虽然操作起来稍微繁琐一点，但是可以集中监控所有数据的变化

实例

const store = new Vuex.Store({
  state: {
    count:0
  },
  // 只有 mutations 中定义的函数，才有权利修改 state中的数据
  mutations: {
      add(state){
        state.count++
      },
  }
})

触发mutation的第一种方式：this.$store.commit(‘xx’)

methods:{
	handle(){
		this.$store.commit('add');
	}
}

触发mutation的第二种方式：

1. 从vuex中按需要导入mapMutations函数 import { mapMutations } from ‘vuex’
2. 将指定的mutations函数，映射为当前组件的methods函数。

methods:{
	...mapMutations(['add'])
	handle(){
		this.add();
	}
	//handle(){this.add();} @click="handle"可以简写@click="add"  在methods中handle这个函数就可以不写了
}

注意：在mutation函数中，不可以执行异步操作。

mutation 传参

mutations: {
   addN(state，step){
     state.count += step;
   }
}

//第一种触发mutation方法：this.$store.commit('addN',x)
methods:{
	handle(){
		this.$store.commit('addN',3)
	}
}

//第二种触发mutation方法：
methods:{
	...mapMutations(['addN'])
	handle(){
		this.addN(3);
	}
}