前沿：总结一下vuex中state，getters,mutations,actions的用法（主推map辅助函数）
介绍：vuex是vue专门为了解决多组件共享数据借鉴Flux、Redux 和 The Elm Architecture
而创造的全局单例模式管理状态库，配合devtools extension可零配置的 time-travel 调试、状态快照导入导出等高级调试功能
vuex工作模式
vuex的核心：本质就是储存数据的‘仓库’（Store）,通过new创建出来，与普通全局对象不同的是，它的状态存储是响应式，还有就是不能直接改变 store 中的状态，唯一途径就是显式地提交 (commit)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
使用前提，必须先挂载在vue实例上或直接将整个创建出来的store导入
//挂载后全局可用，this.$store.state.count
import store from './store'
new Vue({
el: '#app',
store
})
//直接使用，store.state.count
import store from './store'
created(){
console.log("store.state.count",store.state.count)
}
state（就是定义全局数据）
（1）在store中
const state = {
count: 1
}
( 2 )在页面中使用
方法①直接在html中使用
<p>{{ this.$store.state.count }}</p>
方法②利用computed获取在使用
<p>{{ count }}</p>
computed: {
count() {
return this.$store.state.count
}
}
方法③利用辅助函数mapState获取在使用
<p>{{ count }}</p>
import { mapState } from 'vuex'
computed: {
...mapState([
'count' // 映射 this.count 为 this.$store.state.count
])
}
方法④利用辅助函数mapState获取在使用（跟③差不多）
<p>{{ count }}</p>
import { mapState } from 'vuex'
computed: mapState([ 'count'])
getters(store 的计算属性，将state中的数据装饰到页面，但不会改变原来state的数据)
( 1 )在store中
const getters = {
count: function( state ) {
return state.count += 100
}
}
( 2 )在页面中使用
方法①利用computed获取
<p>{{ count }}</p>
computed: {
count() {
return this.$store.getters.count
}
}
方法②利用辅助函数mapGetter获取
<p>{{ count }}</p>
import { mapGetters } from 'vuex
computed: {
...mapGetters([
'count' //把 `this.count ` 映射为 `this.$store.getters.count `
])
}
mutations（提交或者说改变state中的数据，用commit）
( 1 )在store中
const mutations={
add(state){
state.count++;
}
}
( 2 )在页面中使用
方法①在html中使用直接commit
<button @click="$store.commit('add')">+</button>
方法②利用辅助函数mapMutations 获取
<button @click="add">+</button>
import { mapMutations } from 'vuex
methods: {
...mapMutations([
'add', //将 `this.add()` 映射为 `this.$store.commit('add')`
]),
}
actions（作用其实是调用mutations，因为数据来源在后端必定是异步，异步操作全局状态）
( 1 )在store中
方法①context（上下文对象，这里你可以理解称store本身）
const actions ={
addAction(context){
context.commit('add',10)
}
}
方法②{ commit }（直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了）
const actions ={
addAction({commit}){
commit('add')
}
}
( 2 )在页面中使用（dispatch）
方法①直接在html中使用
<button @click="$store.dispatch('addAction')">+</button>
方法②利用辅助函数mapMutations 获取
<button @click="addAction">+</button>
import { mapMutations } from 'vuex
methods:{
...mapActions([
'addAction', //将 `this.addAction()` 映射为 `this.$store.dispatch('addAction')`
])
},
module
( 1 )在store中
将某个功能或页面的所有属性放到一个模块
const moduleA={
state,mutations,getters,actions
}
export default new Vuex.Store({
modules:{a:moduleA}
})
( 2 )在页面中使用
方法①直接computed拿
computed:{
count(){
return this.$store.state.a.count;
}
},
方法②
小结：
1.vuex是什么玩意，其实它就是个壳，我们要的是里面的肉Store。
2.new 出来的store里面就有state（数据），getters（计算），mutations（同步改数据），actions（异步改数据）。
3.只要全局挂载了store，就可以在各个页面中去操作store里面的属性。
4.使用辅助函数是最简单最直观 的方法操作store了，但是要理解一下具体表示啥。
5.触发mutations函数直接调用store.commit方法（$store.commit）
6.actons调用mutations函数：context.commit
7.涉及到多组件传值直接用vuex吧，别想那么多，其也没别人说的那么臃肿
8.多个页面都要用到store要分块，好管理
进阶：
1.当有模块嵌套起来，则在每个子模块的getter和actions的参数就是暴露出rootState
const moduleA = {
// rootState为根状态
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
},
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) { //此时 state, commit, rootState应该是在context对象里面的
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
参考：官网
参考： vuex免费视频教程
网友评论