VueX使用

VueX

安装 | Vuex

对于组件化开发来说，大型应用的状态往往跨越多个组件。在多层嵌套的父子组件之间传递状态已经十分麻烦，而Vue更是没有为兄弟组件提供直接共享数据的办法。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

• Vue2对应VueX3

• Vue3对应VueX4

安装：npm install vuex@3 --save

在store/index.js初始化vuex

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

在main.js导入vuex

import Vue from 'vue'
import App from './App.vue'
import store from "@/store";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store: store,
}).$mount('#app')

在组件中使用

<template>
  <div id="app">
    {{ this.$store.state.count }}
    <button @click="add">加一</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    add() {
      this.$store.commit("increment")
    }
  }
}
</script>

简化this.$store.state

<template>
  <div id="app">
    {{ count }}
    <button @click="add">加一</button>
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapState([
     // 将this.$store.state.count 映射为 count
     'count',
   ])
  },
}
</script>

对于一个列表，我们可以只想要获取其中done属性为true的元素，因此我们需要设置getter，通过mapGetter简化getter

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        todos: [
            {id: 1, text: '...', done: true},
            {id: 2, text: '...', done: false}
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        }
    },
})

export default store

<template>
  <div id="app">
    {{ doneTodos }}
    <button @click="add">加一</button>
  </div>
</template>

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

export default {
  name: 'App',
  computed: {
    ...mapGetters([
        // 将this.$store.getter.doneTodos 映射为 doneTodos
        'doneTodos',
    ])
  },
}
</script>

简化Mutations

import { mapMutations } from 'vuex'

methods: {
    ...mapMutations([
             // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      'increment',
       // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
}