vuex是什么?
先引用vuex官网的话:
引用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
状态管理模式、集中式存储管理 一听就很高大上,蛮吓人的。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用。这么说吧,将vue想作是一个js文件、组件是函数,那么vuex就是一个全局变量,只是这个“全局变量”包含了一些特定的规则而已。
在vue的组件化开发中,经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时,我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系,或者一个状态需要共享给多个组件时,就会非常麻烦,数据也会相当难维护,这对我们开发来讲就很不友好。vuex 这个时候就很实用,不过在使用vuex之后也带来了更多的概念和框架,需慎重!
vuex里面都有些什么内容?
Talk is cheap,Show me the code. 先来一段代码间隔下这么多的文字:
const store = new Vuex.Store({
state: {
name: 'weish',
age: 22
},
getters: {
personInfo(state) {
return `My name is ${state.name}, I am ${state.age}`;
}
}
mutations: {
SET_AGE(state, age) {
commit(age, age);
}
},
actions: {
nameAsyn({commit}) {
setTimeout(() => {
commit('SET_AGE', 18);
}, 1000);
}
},
modules: {
a: modulesA
}
}
这个就是最基本也是完整的vuex代码;vuex 包含有五个基本的对象:
- state:存储状态。也就是变量;
- getters:派生状态。也就是set、get中的get,有两个可选参数:state、getters分别可以获取state中的变量和其他的getters。外部调用方式:store.getters.personInfo()。就和vue的computed差不多;
- mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.commit('SET_AGE', 18)。和vue中的methods类似。
- actions:和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch('nameAsyn')。
- modules:store的子模块,内容就相当于是store的一个实例。调用方式和前面介绍的相似,只是要加上当前子模块名,如:store.a.getters.xxx()。
vue-cli中使用vuex的方式
一般来讲,我们都会采用vue-cli来进行实际的开发,在vue-cli中,开发和调用方式稍微不同。
引用
├── index.html
├── main.js
├── components
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── state.js # 跟级别的 state
├── getters.js # 跟级别的 getter
├── mutation-types.js # 根级别的mutations名称(官方推荐mutions方法名使用大写)
├── mutations.js # 根级别的 mutation
├── actions.js # 根级别的 action
└── modules
├── m1.js # 模块1
└── m2.js # 模块2
state.js示例:
引用
const state = {
name: 'weish',
age: 22
};
export default state;
getters.js示例(我们一般使用getters来获取state的状态,而不是直接使用state):
export const name = (state) => {
return state.name;
}
export const age = (state) => {
return state.age
}
export const other = (state) => {
return `My name is ${state.name}, I am ${state.age}.`;
}
mutation-type.js示例(我们会将所有mutations的函数名放在这个文件里):
export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';
mutations.js示例:
import * as types from './mutation-type.js';
export default {
[types.SET_NAME](state, name) {
state.name = name;
},
[types.SET_AGE](state, age) {
state.age = age;
}
};
actions.js示例(异步操作、多个commit时):
import * as types from './mutation-type.js';
export default {
nameAsyn({commit}, {age, name}) {
commit(types.SET_NAME, name);
commit(types.SET_AGE, age);
}
};
modules--m1.js示例(如果不是很复杂的应用,一般来讲是不会分模块的):
export default {
state: {},
getters: {},
mutations: {},
actions: {}
};
index.js示例(组装vuex):
import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import m1 from './modules/m1.js';
import m2 from './modules/m2.js';
import createLogger from 'vuex/dist/logger'; // 修改日志
vue.use(vuex);
const debug = process.env.NODE_ENV !== 'production'; // 开发环境中为true,否则为false
export default new vuex.Store({
state,
getters,
mutations,
actions,
modules: {
m1,
m2
},
plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});
最后将store实例挂载到main.js里面的vue上去就行了
import store from './store/index.js';
new Vue({
el: '#app',
store,
render: h => h(App)
});
在vue组件中使用时,我们通常会使用mapGetters、mapActions、mapMutations,然后就可以按照vue调用methods和computed的方式去调用这些变量或函数,示例如下:
import {mapGetters, mapMutations, mapActions} from 'vuex';
/* 只写组件中的script部分 */
export default {
computed: {
...mapGetters([
name,
age
])
},
methods: {
...mapMutations({
setName: 'SET_NAME',
setAge: 'SET_AGE'
}),
...mapActions([
nameAsyn
])
}
};
总结
以上就是vuex 的相关知识,其实vuex很简单,多用几次就会熟悉了。
分享到:
相关推荐
Vuex是Vue.js的状态管理模式,用于集中管理应用中的状态,使得状态改变变得可预测,便于多人协作开发和调试。在大型项目中,Vuex可以帮助维护数据的一致性,实现状态的集中管理和跨组件通信。 Ant Design Vue是基于...
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这个压缩包“vuex-dev.zip”可能包含了用于开发 Vuex 应用的...
Vuex 是一个专为 Vue.js 应用设计的状态管理模式,而 Vue Router 是 Vue.js 的官方路由管理器。当这两个库一起使用时,有时需要在它们之间进行数据同步,以确保应用状态的一致性。这就是 `vuex-router-sync` 这个...
Vue.js和Vuex是前端开发中的两个重要框架,Vue.js是一个轻量级的JavaScript库,用于构建用户界面,而Vuex则是一个专为Vue.js应用程序开发的状态管理模式。Vue-Vuex-Starter-Kit是一个用于快速启动Vue.js项目,并集成...
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 【描述】:这个项目DEMO是为初学者或开发者准备的,他们希望...
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在这个名为 "vuex-todos.zip" 的压缩包文件中,我们可以看到...
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在这个“vuex-playlist.zip”压缩包中,我们很可能会找到一个...
7. **状态管理**:Vuex 是Vue.js的应用状态管理模式,帮助管理和共享状态,保持应用状态的一致性。 Ant Design Vue 则是基于Vue.js的UI库,其特点有: 1. **组件丰富**:包含表格、按钮、输入框、通知、布局等多种...
5. **状态管理**:Vuex是Vue.js官方推荐的状态管理模式,用于管理组件之间的共享状态,使应用程序状态管理更加有序。 6. **API接口通信**:后台管理系统通常需要与服务器交互,使用axios库进行异步HTTP请求,获取或...
**Vuex** 是 Vue.js 应用的状态管理模式,它集中管理应用程序的所有组件的状态,并提供了统一的方式来响应式地更新这些状态。通过使用 Vuex,开发者可以更好地跟踪状态变化,避免因数据流混乱导致的问题。 **`...
通过与Vue.js应用的其他组件和状态管理库(如Vuex)集成,Vue-Cron能够帮助开发者构建出强大的定时任务管理系统。 在使用Vue-Cron时,你需要将其引入项目中,并在Vue组件中声明和使用。例如: ```html <vue-cron...
Vuex是Vue的状态管理库,它集中管理全局状态,解决了在大型应用中状态管理的复杂性问题。Vuex提供了一套规则和模式,让状态变更变得可预测,使得多人协作更为有序。在项目中,Vuex用于存储和管理全局的数据,如用户...
6. **Vuex**:作为VUE的状态管理库,Vuex帮助管理共享状态,尤其是在大型应用中,保持数据的一致性。 7. **Webpack或Vue CLI**:项目可能使用Webpack或Vue CLI进行构建和打包,Webpack是强大的模块打包工具,Vue ...
Vuex则是一个专为Vue.js应用程序开发的状态管理模式,它集中管理应用中的状态,解决了组件之间共享状态的问题。Axios是一个基于Promise的HTTP库,可以用于在浏览器和node.js中发送网络请求,支持Promise API,易用且...
通过这个Vue.js项目,开发者可以学习到前端MVC模式的实现、组件化开发、状态管理(Vuex)、路由跳转(Vue Router)、以及与后端API的交互等技术。此外,还能了解到如何构建响应式界面,处理表单提交,实现异步操作,...
3. **Vuex**:Vue的状态管理模式,用于集中管理组件之间的共享状态,保证状态的一致性和可预测性。 4. **Element UI**:一套常用的UI组件库,适用于企业级后台界面,提供丰富的样式和交互效果。 5. **axios**:一...
而Vuex则是一个专为Vue.js应用设计的状态管理模式,它采用集中式的存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 在这个“vue-vuex-registration-login-example”项目中,...
Vuex是Vue.js官方推荐的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在使用Vuex时,状态变化主要通过action和mutation来完成,两者之间存在着明显...
3. **Vuex**:Vuex是Vue.js的状态管理模式,用于集中管理应用状态。它遵循 Flux 架构模式,提供单一状态树,使得组件之间的状态共享变得简单,同时也支持时间旅行调试,提高了开发效率。 4. **Axios**:Axios 是一...