0
点赞
收藏
分享

微信扫一扫

VUEX 的使用学习一

转载请注明出处:

一、Vuex是什么?

  介绍:Vuex 是一个专为 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。他可以方便实现组件之间的数据共享

  理解:核心就是 store(仓库),仓库是用来干什么的?你就当它用来储存东西的。

 二、我们什么时候应该用到Vuex呢?

  a.小应用不建议使用Vuex,因为小项目使用 Vuex 可能会比较繁琐冗余;

  b.中大型单页应用,因为要考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择;

三、对于使用Vuex的理解是什么?

  由于Vue是单向数据流,子组件内部不能直接修改从父级传递过来的数据,子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话,可以借助子组件 A 向父组件传值,父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

  但是这样会有一个问题,就是如果子组件 A 的父组件上面还有一层爷爷组件,或者还有更多祖父类型的层级,那么是不是会很麻烦。

  因此,我们会想到能不能我们将一个共有的数据存在一个特定的地方,用的时候自己去拿,这样就不需要一层层传值,于是乎 Vuex 就应运而生了。

  

VUEX 的使用学习一_数据

 

 

 

四、vuex由五部分组成(五种状态/五种属性)

  

  • ​state​​: 数据
  • ​actions​​:可以包含异步操作
  • ​mutations​​: 唯一可以修改state数据的场所
  • ​getters​​: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)
  • ​modules​​:模块化管理store(仓库),每个模块拥有自己的 state、mutation、action、getter

  

VUEX 的使用学习一_App_02

五、安装配置

  第一步:npm i vuex --save/-S

  第二步: 创建store.js

  第三步:挂载使用 Vue.use(vuex)

  第四步:const store = new Vuex.Store({...配置项})

  第五步:导出 export default store

  第六步:导入main.js 在根实例配置 store 选项指向 store 实例对象

  具体操作步骤:

  安装

npm install vuex

  创建store.js 

import Vue from 'vue'
// 初始化一个vuex的实例(数据仓库) 导出即可
import Vuex from 'vuex'
import axios from 'axios'

// 使用安装
Vue.use(Vuex)

// 初始化,并声明:state,mutations,actions,getters等属性
export default new Vuex.Store({
state: {
// 所有的任务列表
list: [],
// 文本框的内容
inputValue: 'aaa',
// 下一个Id
nextId: 5,
viewKey: 'all'
},
mutations: {
// 清除已完成的任务
cleanDone(state) {
state.list = state.list.filter(x => x.done === false)
},
// 修改视图的关键字
changeViewKey(state, key) {
state.viewKey = key
}
},
actions: {
getList(context) {
axios.get('/list.json').then(({ data }) => {
// console.log(data)
context.commit('initList', data)
})
}
},
getters: {
// 统计未完成的任务的条数
unDoneLength(state) {
return state.list.filter(x => x.done === false).length
},
}
})

  把store对象挂载到Vue实例中,可以在main.js 中进行绑定

import store from './store.js'
import App from './App.vue'

new Vue({
render: h => h(App),
store
}).$mount('#app')

 

  在网上找到一个demo 示例,可参考学习: ​​https://gitee.com/xiangbaxiang/vue-store​​



举报

相关推荐

VUEX的学习

vuex的使用

Vuex的使用

vuex学习

Vuex学习

0 条评论