Vue学习笔记——Vuex

快速上手

安装vuex。

npm install vuex@3

注册Vuex。

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'//1
Vue.config.productionTip = false
Vue.use(Vuex)//2
const store = new Vuex.Store({
  strict: true,
  state: {
    v: 0
  }
})//3
new Vue({
  render: h => h(App),
  store//4
}).$mount('#app')

访问state。

<template>
  <div>
    <h1>这是{{ $store.state.v }}</h1>
  </div>
</template>

State

核心状态数据。

可以将state映射为组件的计算属性。

<template>
  <div>
    <h1>这是{{ v }}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed:{
    ...mapState(['v'])
  }
}
</script>

<style scoped>
</style>

Mutations

用于修改状态。

const store = new Vuex.Store({
  strict: true,
  state: {
    v: 0
  }, mutations: {
    addV(state) {
      state.v++
    }
  }
})

调用它。

<h1 @click="$store.commit('addV')">这是{{ v }}</h1>

可以传参。

const store = new Vuex.Store({
  strict: true,
  state: {
    v: 0
  }, mutations: {
    addV(state, v) {
      state.v += v
    }
  }
})

调用它。

<h1 @click="$store.commit('addV',3)">这是{{ v }}</h1>

可以将mutations映射为组件的方法。

<template>
  <div>
    <h1 @click="addV(3)">这是{{ v }}</h1>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
export default {
  computed:{
    ...mapState(['v'])
  },methods:{
    ...mapMutations(['addV'])
  }
}
</script>

<style scoped>
</style>

Actions

异步操作。

const store = new Vuex.Store({
  strict: true,
  state: {
    v: 0
  }, mutations: {
    addV(state, v) {
      state.v += v
    }
  }, actions: {
    addVA(context, v) {
      setTimeout(() => {
        context.commit('addV', v)
      }, 1000)
    }
  }
})

调用它。

<h1 @click="$store.dispatch('addVA',4)">这是{{ v }}</h1>

可以将actions映射为组件的方法。

import { mapState,mapMutations,mapActions } from 'vuex';
export default {
  computed:{
    ...mapState(['v'])
  },methods:{
    ...mapMutations(['addV']),
    ...mapActions(['addVA'])
  }
}

Getters

由data衍生的状态。

const store = new Vuex.Store({
  strict: true,
  state: {
    v: 0
  }, mutations: {
    addV(state, v) {
      state.v += v
    }
  }, actions: {
    addVA(context, v) {
      setTimeout(() => {
        context.commit('addV', v)
      }, 1000)
    }
  }, getters: {
    V(state) {
      return state.v + 1
    }
  }
})

访问它。

$store.getters.V

可以将getters映射为组件的计算属性。

import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
export default {
  computed:{
    ...mapState(['v']),
    ...mapGetters(['V'])
  },methods:{
    ...mapMutations(['addV']),
    ...mapActions(['addVA'])
  }
}

模块拆分

单独的js文件。

export default {
    state: {
        v: 0
    }, mutations: {
        addV(state, v) {
            state.v += v
        }
    }, actions: {
        addVA(context, v) {
            setTimeout(() => {
                context.commit('addV', v)
            }, 1000)
        }
    }, getters: {
        V(state) {
            return state.v + 1
        }
    }
}

main.js中使用模块。

import abc from "./store.js"

const store = new Vuex.Store({
  modules: {
    abc
  }
})

访问state。

$store.state.abc.v

映射方式变化了。

export default {
    namespaced: true,//这里需要添加
    state: {
        v: 0
    }
    。。。
}

map函数第一个参数为模块名。

import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
export default {
  computed:{
    ...mapState('abc',['v']),
    ...mapGetters('abc',['V'])
  },methods:{
    ...mapMutations('abc',['addV']),
    ...mapActions('abc',['addVA'])
  }
}

访问getters。

$store.getters['abc/V']

mutations，actions同理。

$store.commit('abc/addV',1)
$store.dispatch('abc/addVA',1)