Vuex

Vuex

vue2使用vuex3，vue3使用vuex4。

index.js 内容如下：

// 该文件用于创建vuex中最核心的store

import Vue from 'vue'
import Vuex from 'vuex';

// Vuex插件的使用要在store对象创建之前，js文件中会在执行前扫描所有import语句并提前执行
Vue.use(Vuex)

// 准备actions——用于相应组件中动作
const actions = {
  add(context, value){
    context.commit('ADD', value)
  },
}
// 准备mutations——用于操作数据
const mutations = {
  ADD(state, value) {
    state.sum += value
  }
}
// 准备state——用于存储数据
const state = {
  sum: 0,
}

// 创建并暴漏 store
export default new Vuex.Store({
  actions,
  mutations,
  state,
})

在 main.js 中挂载 store 选项

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 使用Vuex插件后配置store选项，在vm和VueComponent中都可以看见 $store
  store,
}).$mount('#app')

在组件模板中中使用插值语法： {{$store.state.sum}}
使用Vuex中使用actions方法：this.$store.dispatch('add',  3)
使用mutations方法：this.$store.commit('ADD', 3)

如果没有太复杂的业务逻辑，也可以越过action直接写commit

 

getters

根据state中的数据，被调用时生成新数据。

// 该文件用于创建vuex中最核心的store

import Vue from 'vue'
import Vuex from 'vuex';

// Vuex插件的使用要在store对象创建之前，js文件中会在执行前扫描所有import语句并提前执行
Vue.use(Vuex)

// 准备actions——用于相应组件中动作
const actions = {}
// 准备mutations——用于操作数据
const mutations = {}
// 准备state——用于存储数据
const state = {}

// getters 不是必需的
// 准备getters —— 用于将state中数据进行加工
const getters = {
  tenTime(state) {
    return state.sum * 10
  }
}

// 创建并暴漏 store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters,
})

在模板中使用：{{$store.getters.temTime}}

mapState mapGetters mapActions mapMutations

component.vue

<template>
  <div>
    {{sum}}<br/>
    {{tenTime}}<br/>
    <button @click="add(1)">+1</button>
  </div>
</template>

<script>
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'

export default {
  name: 'MyStudent',
  computed: {
    // 手动实现mapState
    // mySum(){
    //   return this.$store.state.sum
    // }
    // 借助mapState生成计算属性，从state中读取数据（对象写法）
    // ...mapState({mySum:'sum'/*, other:'other'*/}),
    // 数组写法
    ...mapState(['sum']),


    // 手动实现 mapSetters
    // tenTime(){
    //   return this.$store.getters.tenTime
    // }
    // 对象写法
    ...mapGetters({tenTime:'tenTime'}),
  },
  methods: {
    // 想要的
    // add() {
    //   this.$store.dispatch('add', 1)
    // },
    // 默认生成的，默认传入的value为event事件，为了达到想要效果可以手动传 1
    // add(value) {
    //   this.$store.dispatch('add', value)
    // },
    // 借用mapActions生成对应的方法，方法中调用dispatch
    ...mapActions({add:'add'}), // ...mapActions(['add'])
    ...mapMutations(['ADD']),
  }
}
</script>

 

模块化和 namespace

使用命名空间，可以拆分为不同文件。

import Vue from 'vue'
import Vuex, { mapState, mapState } from 'vuex';

Vue.use(Vuex)

const option1 = {
  // 用于将内容从命名空间中导出
  namespaced: true,
  actions:{
    add(context, value){
      context.commit('ADD', value)
    },
  },
  mutations:{
    ADD(state, value) {
      state.sum += value
    }
  },
  state:{
    sum: 3,
  },
  getters:{
    tenTime(state) {
      return state.sum * 10
    }
  },
}

const option2 = {
  actions:{},
  mutations:{},
  state:{},
  getters:{},
}

export default new Vuex.Store({
  modules: {
    a: option1,
    b: option2,
  },
  // 同时也可以直接挂载在根上
})

使用 Vuex 提供函数获得

// mapGetters mapActions mapMutations 使用方法类似
...mapState(['a', 'b'])     // 使用方法 a.sum b.xx
// 需要 namespaced:true; 将内容从命名空间中导出
...mapState('a', ['sum'])   // 使用方法 sum

通过 $store 直接获得

this.$store.state.a.sum

this.$store.getters['a/temTime']

this.$store.dispatch('a/add', 1)
this.$store.commit('a/ADD', 1)