[toc]
VueX学习
- 把需要多个组件共享的变量全部存储在一个对象里面。
- 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
- 响应式
- npm install vuex –save
单界面的状态管理
- State：就是我们的状态。（可以当做就是data中的属性）
-
View：视图层，可以针对State的变化，显示不同的信息。
-
Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。
多界面状态管理
-
多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）
-
不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）
VueX的五个核心概念
-
State: 单一状态树
-
const state = { counter: 1000, students: [ {id: 110, name: 'why', age: 18}, {id: 111, name: 'kobe', age: 24}, {id: 112, name: 'james', age: 30}, {id: 113, name: 'curry', age: 10} ], info: { name: 'kobe', age: 40, height: 1.98 } } -
Getters: 类似于组件中的计算属性, 作为参数和传递参数,可以传入两个参数
- state: 传入的是state中的数据. 通过state. 获取
- getters: : 传入的是getters中的数据, 通过 getters. 获取
- 如果需要传递参数, 需要return一个函数
-
export default { powerCounter(state) { return state.counter * state.counter }, more20stu(state) { return state.students.filter(s => s.age > 20) }, more20stuLength(state, getters) { return getters.more20stu.length }, moreAgeStu(state) { return age => { return state.students.filter(s => s.age > age) } } }
-
Mutations: 状态更新
- commit提交风格
-
字符串的事件类型（type）
-
一个回调函数（handler）,该回调函数的第一个参数就是state。
-
包含type属性的对象:
-
Mutation中的处理方式是将整个commit的对象作为payload使用
-
参数被称为是mutation的载荷(Payload)
-
响应式规则
-
如果直接操作对象或者数组,添加或者删除对象, 页面是不会做到响应式的,
- Vue.set(state.info, ‘address’, ‘河北’): 可以做到响应式的添加
-
Vue.delelte(state.info, ‘age’): 可以做到响应式的删除
-
类型常量
-
使用常量替代Mutation事件的类型.
- 可以将这些常量放在一个单独的文件中
-
可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量
-
“`js
import {INCREMENT} from “./mutations-types”;
export default {
// 方法
INCREMENT {
state.counter++
},
}
“`
<li><p>Actions: 类似于Mutation, 但是是用来代替Mutation进行异步操作的.
<ul>
<li>所有异步操作要放到action中</p></li>
<li><p>可以使用Promise</p></li>
<li><p>“`js
export default {
// context: 上下文
aUpdateInfo(context, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit(‘updateInfo’);
console.log(payload);
resolve('1111111')
}, 1000)
})
}
}
“`
- 当state过多的时候,可以使用module来分离, 在中定义模块,每个模块可以定义上面的所有属性
Vuex的使用
- 创建一个文件夹store，并且在其中创建一个index.js文件, 存放Vuex代码
- 在store文件夹中创建actions.js: 被分离出来的 用于异步处理的js文件
- 在store文件夹中创建getters.js: 被分离出来的 用于计算属性的js文件
- 在store文件夹中创建mutations.js:被分离出来的 用于接收提交过来的状态, 并进行更新
- 在store文件夹中创建mutation-types.js: 用于存放常量
- 在store文件夹中创建modules文件夹,用来存放不同的模块
- 挂载到Vue实例中
Vuex的基本使用
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import moduleA from './modules/moduleA'
// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const state = {
counter: 1000,
students: [
{id: 110, name: 'why', age: 18},
{id: 111, name: 'kobe', age: 24},
{id: 112, name: 'james', age: 30},
{id: 113, name: 'curry', age: 10}
],
}
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
modules: {
a: moduleA
}
})
// 3.导出store独享
export default store
src/main.js
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store, // 导入store
router,
render: h => h(App)
})
推荐的目录结构
