×

vuex使用流程 vuex

关于 vuex 的疑惑,有一些问题求教?vue如何使用vuex,vuex是vuex.js文件吗

admin admin 发表于2022-06-14 04:20:48 浏览125 评论0

抢沙发发表评论

关于 vuex 的疑惑,有一些问题求教


你需要阅读官方文档.
对于问题一,官方文档的描述,getters可以当做计算属性,如果不知道计算属性,可以参考vue官方文档.
对于问题二,mapstate,如官档描述,仅仅是把state映射到当前组件的计算属性.如果你不错误的使用,它不会报错.关于store的刷新状态保持,可以搜到很多例子.都是些常规例子.

vue如何使用vuex,vuex是vuex.js文件吗


vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如:代码热更新,修改代码之后网页无刷新改变,对前端开发来说非常的方便PostCss,再也不用去管兼容性的问题了,只针对chrome写css代码,会自动编译生成支持多款浏览器的css代码Eslint,统一代码风格,规避低级错误,对于有代码洁癖的人来说是绝对的好东西,不过有些地方的代码校验有时候也挺麻烦的-.-bable,ES2015出来已经有一段时间了,但是不少浏览器还没有兼容ES6.有了bable,放心使用ES6语法,它会自动转义成ES5语法。Stylus,类似于SASS/SCSS,但是可以不写{}和“:”,使用起来还是很方便的…除此之外,vue-cli已经使用node配置了一套本地服务器和安装命令等,本地运行和打包只需要一个命令就可以搞定,非常的方便开发vue非常好的融合了react的组件化思想和angular的指令思想。一个vue的组件将HTML、CSS、JS代码写在一个文件里面,这样既方便编写,也方便管理和修改Axios在vue1.x的时候,vue的官方推荐HTTP请求工具是vue-resource,但是在vue2.0的时候将推荐工具改成了axios。使用方式都差不多,但需要注意的是:接口返回的res并不直接是返回的数据,而是经过axios本身处理过的json对象。真正的数据在res.data里:axios.get(url).then((res)=》{this.data=res.data})Vuexvue提供了一个数据管理工具vuex,有点类似于angular中factory和service,可以进行数据上的通信。比如存储一些公共变量或者是不同组件间的数据处理等。这个有一些高级用法在这里不细说,想要了解的可以去官方文档看,有中文版本。conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}})Vue-Routervue-router是vue的路由系统,可以用来创建单页应用。基本思想是在主页面中引入标签,然后定义路由,把router挂在到app上,然后把各个子页面渲染到view里面。使用起来还是很方便的,跳转页面只需要router.push(’test’)获取元素节点vue2.0废除了v-el指令,所有的节点指令修改为ref,然后通过ref来获取元素节点,如testjscodethis.$ref.testHook组件间的通信一。如果是和子组件通信,则使用ref就可以实现,如:jscodethis.$ref.testHook.add()//调用test子组件的add方法二。使用emit来发送广播vue2提供了一套广播机制,即一边发送广播,一边接收广播来执行相应操作。使用方法如下:比如想要给test组件发送一个“相加”广播:exportdefault{method:{click(){Vue.$emit(’add’,{})//第二个参数可作为传递数据传送到监听端口,不需要则传空对象}}}那么test组件中就需要监听,在created方法里写exportdefault{created(){Vue.$on(’add’,this.add)},method:{add(){this.count++}}}除了以上总结的这点小的知识点以外,还有很多vue的知识想要和大家分享,以后会陆续写出来,大家感兴趣的也可以来我的GitHub一起来写这个项目(觉得不错的给个starHah)

如何使用Vuex+Vue.js构建单页应用


按照上面我们列出来的功能模块,我们在 Vuex/ 下面建立一个 store.js 文件
import Vue from ’vue’;
import Vuex from ’vuex’;

Vue.use(Vuex);

// 需要维护的状态
const state = {
notes: ,
activeNote: {},
show: ’’
};

const mutations = {
// 初始化 state
INIT_STORE(state, data) {
state.notes = data.notes,
state.show = data.show;
state.activeNote = data.activeNote;
},
// 新增笔记
NEW_NOTE(state) {
var newNote = {
id: +new Date(),
title: ’’,
content: ’’,
favorite: false
};
state.notes.push(newNote);
state.activeNote = newNote;
},
// 修改笔记
EDIT_NOTE(state, note) {
state.activeNote = note;
// 修改原始数据
for (var i = 0; i 《 state.notes.length; i++) {
if(state.notes[i].id === note.id){
state.notes[i] = note;
break;
}
};
},
// 删除笔记
DELETE_NOTE(state) {
state.notes.$remove(state.activeNote);
state.activeNote = state.notes || {};
},
// 切换笔记的收藏与取消收藏
TOGGLE_FAVORITE(state) {
state.activeNote.favorite = !state.activeNote.favorite;
},
// 切换显示数据列表类型:全部 or 收藏
SET_SHOW_ALL(state, show){
state.show = show;
// 切换数据展示,需要同步更新 activeNote
if(show === ’favorite’){
state.activeNote = state.notes.filter(note =》 note.favorite) || {};
}else{
state.activeNote = state.notes || {};
}
},
// 设置当前激活的笔记
SET_ACTIVE_NOTE(state, note) {
state.activeNote = note;
}
};

export default new Vuex.Store({
state,
mutations
});

创建 Vuex Actions
在 Vuex/ 下面建立一个 action.js,用来给组件使用的函数
function makeAction(type) {
return ({ dispatch }, ...args) =》 dispatch(type, ...args);
};

const initNote = {
id: +new Date(),
title: ’我的笔记’,
content: ’第一篇笔记内容’,
favorite: false
};

// 模拟初始化数据
const initData = {
show: ’all’,
notes: [initNote],
activeNote: initNote
};

export const initStore = ({ dispatch }) =》 {
dispatch(’INIT_STORE’, initData);
};
// 更新当前activeNote对象
export const updateActiveNote = makeAction(’SET_ACTIVE_NOTE’);

// 添加一个note对象
export const newNote = makeAction(’NEW_NOTE’);

// 删除一个note对象
export const deleteNote = makeAction(’DELETE_NOTE’);
export const toggleFavorite = makeAction(’TOGGLE_FAVORITE’);
export const editNote = makeAction(’EDIT_NOTE’);

// 更新列表展示
export const updateShow = makeAction(’SET_SHOW_ALL’);

创建 Vuex Getters
在 vuex/ 下面建立一个 getter.js 文件,用来从 store 获取数据
// 获取 noteList,这里将会根据 state.show 的状态做数据过滤
export const filteredNotes = (state) =》 {
if(state.show === ’all’){
return state.notes || {};
}else if(state.show === ’favorite’){
return state.notes.filter(note =》 note.favorite) || {};
}
};

// 获取列表展示状态 : all or favorite
export const show = (state) =》 {
return state.show;
};

// 获取当前激活 note
export const activeNote = (state) =》 {
return state.activeNote;
};

以上就是我们 Vuex 的所有逻辑了,在定下了我们需要完成的功能之后,接下来就是只需要在组件中去调用 action 来实现对应的功能了。
路由配置
在这里我们将使用 vue-router 来做路由,引用 bootstrap 样式。
index.html
《!DOCTYPE html》
《html》
《head》
《meta charset=“utf-8“》
《title》vuex-notes-app《/title》
《link rel=“stylesheet“ href=“

// 修改笔记
EDIT_NOTE(state, note) {
state.activeNote = note;
// 修改原始数据
for (var i = 0; i 《 state.notes.length; i++) {
if(state.notes[i].id === note.id){
state.notes[i] = note;
break;
}
};
},
-vuex