Vue开发实战札记

Vuex统一了页面内的状态的管理和变化线程,使得单页面应用组件之间的交互变得更流畅,控制更有秩序,避免了两个组件同时变化同一个状态容易引发的冲突问题。

本文档编写对应版本为vue1.0+vuex1.2+,请注意不同版本之间的差异。

VUEX使用步骤:

1.初始化Store

定义vuex/store.js

/*
* 全局变量仓库
*/
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
// 保存初始状态
const state = {
token: null,
user: {
avatar: null,
name: null,
phone: null
}
}
// 存储状态变更函数
const mutations = {
SETTOKEN(state,token) {
state.token = token;
}
}
// 连接到应用
export default new Vuex.Store({
state,
mutations
})

定义vuex/getters.js

/*
*获取仓库指定参数的值
*/
export function getToken(state) {
return state.token;
}

定义vuex/actions.js

/*
* 向全局变量仓库插入指定值.
* dispatch触发的函数必须是在store中定义的存储状态变更函数
*/
//设置token
export const setToken = function({dispatch}, token) {
dispatch('SETTOKEN',token)
}

2.使用store

在页面js中引入store

import Vue from 'vue';
import store from '../../vuex/store';
import App from '../../app.vue';
new Vue({
store,components:{App}
})

在组件中引用。

import { setToken } from '../../vuex/actions'; //引入action钩子
export default {
//vuex
vuex: {
getters: {
token: state => state.token
},
actions: {
setToken
}
},
computed: {},
//vuex end
data() {
return {}
},
methods: {
test() {
if (xxx) {
this.setToken(xxx); //调用action
}
}
}
}

3.使用小结

在当前Vue(v1.0+)版本中使用Vuex还是没有展示出很强的优势,毕竟目前组件之间有syncv-modal搭配使用,在小项目中已经足够通过父组件来统一管理不同子组件的状态并同步到各个组件中。

hongbao.png
NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/framework/vue-learn/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!