详解vuex的简单使用

详解vuex的简单使用

什么是vuex

Vuex是Vue.js的状态管理库，在大型单页应用中，管理共享的状态是比较困难的，因为多个组件共享状态，会导致代码结构不易维护。而Vuex就是为了解决此类问题而诞生的。

Vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex所存储的状态可以用之内的方法触发改变，且变化都是通过明确的提交(commit)来追踪的。

安装vuex

npm install vuex --save

或者使用CDN引入

<script src="https://unpkg.com/vuex"></script>

使用vuex

• 创建Store实例

Store是Vuex中最核心的结构，它包含了应用的状态(state)，定义了应用状态的变更逻辑(mutations)，定义了应用从外部获取数据的方法(actions)。Vuex应用中所有组件通过Store实例中的状态来获取信息，也可能触发状态变化。

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

// 加载Vuex
Vue.use(Vuex)

// 创建Store实例
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

• 在组件中获取state

computed: {
  count() {
    return this.$store.state.count
  }
}

• 在组件中触发提交mutations

methods: {
  increment() {
    this.$store.commit('increment')
  }
}

示例说明

示例一：计数器功能

• 在src目录下新建store.js文件，内容如下：

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

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

const getters = {
  count(state) {
    return state.count
  }
}

const actions = {
  incrementAsync(context) {
    setTimeout(() => {
      context.commit('increment')
    }, 1000)
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

export default store

• 在main.js中引入store.js文件

import store from './store'

• 在组件中引入Vuex，并使用Vuex.store获取store中的state和mutations

import { mapState, mapMutations } from 'Vuex'
export default {
  computed: {
    ...mapState({
      count: state => state.count
    })
  },
  methods: {
    ...mapMutations([
      'increment',
      'decrement'
    ])
  }
}

• 在模板中使用计数器

<template>
  <div>
    当前计数：{{ count }}
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

示例二：异步获取数据

• 在src目录下新建store.js文件，内容如下：

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

Vue.use(Vuex)

const state = {
  users: []
}

const mutations = {
  setUsers(state, users) {
    state.users = users
  }
}

const getters = {
  users(state) {
    return state.users
  }
}

const actions = {
  async getUsers(context) {
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    const users = await res.json()
    context.commit('setUsers', users)
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

export default store

• 在main.js中引入store.js文件

import store from './store'

• 在组件中引入Vuex，并使用Vuex.store获取store中的state和actions

import { mapState, mapActions } from 'Vuex'
export default {
  computed: {
    ...mapState({
      users: state => state.users
    })
  },
  methods: {
    ...mapActions([
      'getUsers'
    ])
  },
  created() {
    this.getUsers()
  }
}

• 在模板中使用获取的数据

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>