一、介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,这里的状态管理实际上就是公共数据管理。
- state
- Getter
- Mutation
- Action
- Module
二、使用场景
对于多层嵌套的组件,传参是一个很头疼的问题。如果有一个地方能够存放公共数据,多个组件只需从同一个地方取想要的数据,减少组件之间的繁琐值传递。
三、项目应用
- 安装Vuex
方式一:
直接下载 / CDN 引用 https://unpkg.com/vuex
Unpkg.com 提供了基于 NPM 的 CDN 链接。以上的链接会一直指向 NPM 上发布的最新版本。您也可以通过 https://unpkg.com/vuex@2.0.0这样的方式指定特定的版本。
在 Vue 之后引入 vuex 会进行自动安装:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
方式二:
使用npm安装
npm install vuex --save
方式三:
使用yarn安装
yarn add vuex
- 在项目创建一个store文件夹,该文件夹下包含一个index.js文件
import Vue from 'vue'
# 1. 使用npm或yarn安装包
# 2. 导入包
import Vuex from 'vuex'
# 3. 注册vuex到Vue中
Vue.use(Vuex)
# 4. new Vuex.Store()实例,得到一个数据仓储对象
export default new Vuex.Store({
state: {
// 可以把state想象成组件中的data,专门用来存储数据
groupName: '',
projectName: '',
actionName: '',
apiId: 0
},
mutations: {
// 注意:如果要操作store中的state 值,只能通过调用mutations提供的方法,才能操作对应数据。
//不推荐直接操作state中的数据。原因:由于每一个组件都有可能操作数据,万一导致了数据的紊乱,不能快速定位到错误的原因
editGroupName(state, param){
state.groupName = param
},
editProjectName(state, param){
state.projectName = param;
},
editActionName(state, param){
state.actionName = param.actionName;
state.apiId = param.apiId
}
},
getters: {
// 注意:这里的getters只负责对外提供数据,不负责修改数据,如果要修改state中的数据,请去找mutations
// getters中的方法和组件中的过滤器比较类似,因为过滤器和getters都没有修改原数据,都是把原数据做了一层包装,提供给了调用者。
// 其次,getters和computed比较像,只要state中的数据发生变化啦,那么,如果getters正好也引用了这个数据,就会立刻触发getters的重新求值
},
actions: {
},
modules: {
}
})
- 更新main.js中代码
import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import axios from 'axios'
Vue.prototype.axios = axios
#引入Vuex相关
import store from './store'
import App from './App.vue'
Vue.use(Antd);
Vue.config.productionTip = false
new Vue({
store, //新添加内容
render: h => h(App),
}).$mount('#app')
- 将数据存入store中
#使用commit方法,参数1: 代表mutations中的方法名,参数2:代表参数(只能有一个参数)
this.$store.commit('editGroupName', groupName);
- 将store中的数据取出
#其中groupName是state 中定义的变量名
this.$store.state.groupName