【VUE】-Vuex学习与使用

什么是Vuex?

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，使用插件的形式引进项目中

• 集中存储和管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
• 每一个 Vuex 应用的核心就是 store（仓库），new Vue.store({…})，“store”基本上就是一个容器，它包含应用中大部分的状态 (state)

什么时候使用？

用于SPA开发大型单页应用时使用

Vuex核心概念

• State：共享状态（变量）

• Getter：基于state的派生状态，可理解为组件中的计算属性

• Mutation：一组方法，改变store中状态的执行者，同步操作

• action：一组方法，类似mutation，但其中可以含有异步操作

• Module：模块，方便状态管理与协作开发使用

安装与使用

1、安装

npm install vuex --save

2、引入文件

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

3、使用vuex插件：

Vue.use(Vuex)

• 在Index.js中设置全局变量

const store = new Vuex.Store({
  modules: {
    user
  },
  // 类似于vue中的计算属性，根据gertter或state计算返回值
  getters,
  // 中间传值,存储各个状态
  state: {
    createrBrainstorm: '123'
  },
  // 一组方法，改变store中状态的执行者
  mutations: {
    setDeleteValue(state, value) {
      state.createrBrainstorm = value
    }
  },
  // 一组方法，其中可以含有异步操作
  actions: {
    setDeleteValueAsync({ commit }) {
      setTimeout(() => {
        commit('setDeleteValue')
      }, 1000)
    }
  }
})

• 使用页面

1、引入

import { mapState } from 'vuex'

2、将全局变量映射为自己界面的变量

computed: {
    // 展开运算符，将全局变量映射为自己界面的变量
    ...mapState(['createrBrainstorm'])
  }

3、监听变量变化并执行操作

watch: {
    createrBrainstorm(newVal) {
      if (newVal) {
        //监听到变量发生变化所执行的操作
        this.queryList()
        // 恢复全局变量
        this.$store.commit('setDeleteValue', '123')
      }
    }
  }