【VUE】Vuex学习与使用

什么是Vuex?

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

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

什么时候使用&＃xff1f;

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

Vuex核心概念

• State&＃xff1a;共享状态&＃xff08;变量&＃xff09;

• Getter&＃xff1a;基于state的派生状态&＃xff0c;可理解为组件中的计算属性

• Mutation&＃xff1a;一组方法&＃xff0c;改变store中状态的执行者&＃xff0c;同步操作

• action&＃xff1a;一组方法&＃xff0c;类似mutation&＃xff0c;但其中可以含有异步操作

• Module&＃xff1a;模块&＃xff0c;方便状态管理与协作开发使用

安装与使用

1、安装

npm install vuex --save


2、引入文件

import Vue from &＃39;vue&＃39;
import Vuex from &＃39;vuex&＃39;


3、使用vuex插件&＃xff1a;

Vue.use(Vuex)


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

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


• 使用页面

1、引入

import { mapState } from &＃39;vuex&＃39;


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

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


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

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