vuex的使用
2018-07-20 本文已影响0人
星球小霸王
1.vuex
vuex官网的解释是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
vuex包含五个基本的对象
- state :存储状态。
- getters :派生状态
- mutations : 提交状态修改，这是vuex中唯一修改state的方式，但是不支持异步操作，第一个参数默认为state
- actions :和mutations类似。不过actions支持异步操作，第一个参数是和store具有相同参数属性的对象
- modules:store的子模块
2.下面介绍vuex在项目中的目录结构以及使用方式
使用的vue-cli脚手架搭建整个项目
那么整个项目目录应该为：其中src下的vuex就是整个vuex的目录结构
1532057254(1).jpg
3.下面介绍vuex目录下每个文件的配置和作用
-
state.js
//state 存储数据的状态
//示例代码
const state = {
name:'',
age:'',
classes:''
}
export default state
-
getters.js
//我们一般会用getters来获取state中的状态，而不是直接使用state
const getters = {
name:(state)=>{
return state.name
},
age:(state)=>{
return state.age
},
classes:(state)=>{
return state.classes
},
}
export default getters;
-
mutation-types.js
//为了是编辑器和lint工具生效我们会将mutations下的所有函数名放到这个文件里
export const SET_NAME = 'SET_NAME'
export const SET_AGE = 'SET_AGE'
export const SET_CLASS = 'SET_CLASS'
-
mutations.js
//引入mutation-types.js中定义好的一些方法名；
//improts * as types 代表的是将所有的mutation-types.js下的方法名导入进来并且赋值给 types;
import * as types from './mutation-types';
const mutations = {
//这里使用的是es6 对象的扩展 属性名表达是（即表达式可以作为属性名）
[types.SET_NAME](state,name){
state.name = name
},
[types.SET_AGE](state,age){
state.age = age
},
[types.SET_CLASS](state,classes){
state.classes = classes
}
}
export default mutations;
-
actions.js
import * as types from './mutation-types';
const actions = {
//{commit,state} 上面说了actions第一个参数是和store具有相同属性的参数
//所以这里采用了对象的解构赋值
name:({commit,state},payload)=>{
/*payload可以传过来一个对象用来提交多个参数*/
setTimeout(function(){
commit(types.SET_NAME,payload)
},2000)
},
age:({commit,state},payload)=>{
setTimeout(function(){
commit(types.SET_AGE,payload)
},3000)
},
classes:({commit,state},payload)=>{
setTimeout(function(){
commit(types.SET_CLASS,payload)
},4000)
}
}
export default actions
-
index.js (组装整个vuex);
import Vue from "vue";
import state from './state.js';
import mutations from './mutations';
import actions from './action';
import getters from './getters';
import Vuex from "vuex";
import Logger from 'vuex/dist/logger' //启用日志
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production' //是否是生产模式
export default new Vuex.Store({
state,
getters,
actions,
mutations,
strict:debug,
plugins:debug?[Logger(0)]:[]
})
4.最后将store挂载到main.js里面的vue上就可以了
import store from './vuex/index.js';
new Vue({
el:"#app",
store,
...
})
