vuex | 应用场景
- 用于【共享状态】较多，经常被在各处修改的【大型项目】
- 用于大中型单页应用，简单的 spa 可以使用【中央数据总线 bus 】来管理数据（bus也是一个vue实例）
- 如果不是多人协作或非常复杂的项目，一个简单的 store 模式就足够了
store | 是全局共享状态
- 把组件的共享状态抽取出来，以一个全局单例模式管理
- 组件树构成了一个巨大的“视图”，任何组件都能获取状态或者触发行为
- 通过定义和隔离状态管理，代码将会变得更结构化且易维护
store | 是响应式全局变量
- Vuex 的【状态存储是响应式的】，若 修改store（只能用 commit 或 action 方式），那么相应的组件也会更新数据
commit 和 action 操作
- 应用层级的状态应该集中到单个 store 对象中
- 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation
- 异步逻辑都应该封装到 action 里面
vuex 目录结构
- 一般，一个简单的 store 文件即可
- 大型多人开发应用，Vuex 相关代码要分割到模块中，如下
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
严格模式（不建议设置）
- 设置 strict: true。不要在发布环境下启用严格模式！
三步跑起第一个 vuex 程序
- 1 新建 store.js 文件
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
}
- 2 在根组件 js 文件中注册 store
import store from "./store";
new Vue({
el: "#app",
store,
router: router,
render: h => h(App)
});
- 3 已经可以在所有的组件中使用了。通过【this.$store.state】的方式引用，但注意，如果要在组件中使用 store 的值，就需要将其声明为【计算属性】予以保存
export default {
data() {
return {};
},
computed: {
count() {
return this.$store.state.count;
}
}
};
基础概念的完全理解
state | 存储数据
getters | 加工数据
- 加工并获取派生数据，可以理解为 store 中的计算属性
- 一个Gette中也可以接受另一个Getter
- 在组件中使用时，可将其值保存在组件的计算属性中
//声明
getters: {
countText: state => {
return "the count is " + state.count;
}
},
//调用
//在组件中保存 getters 中的数据
computed: {
countText() {
return this.$store.getters.countText;
}
},
mutations | 修改 state 的唯一方式
- 更改 state 的方法，也是唯一的方法
- ==mutations必须是同步执行==
- 在组件中，==通过 this.$store.commit 方法调用==
- commit 方法第一个参数为mutations方法名，第二个参数可以是一个对象
//声明
mutations: {
setToken(state, newToken) {
state.data.token = newToken;
},
//向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
//使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数
incrementByAnything(state, payload) {
state.count += payload.more;
}
},
//调用
mounted() {
this.$store.commit("setToken", "bbbbb");
},
actions | 允许异步操作
- action 提交的是 mutation，不能直接变更状态
- action ==可以包含任意异步操作==
- action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，它可以避免写 const that = this 这样的代码
- 在组件中，==通过 this.$store.dispatch 方法调用==
- dispatch 方法第一个参数为mutations方法名，第二个参数可以是一个对象
- 在一个 actions 方法中，可以调用另一个 actions 方法
//先声明mutations
mutations: {
setToken(state, newToken) {
state.data.token = newToken;
},
nameToUppercase(state, friend) {
state.data.fullName = (state.data.fullName + friend).toUpperCase();
},
}
//声明actions，其中只能使用mutations
//actions中可以包括异步操作
//actions方法接受两个参数，第一个可以是对象，第二个是传参（可以是对象）
actions: {
nameToUppercase({ commit,sate }, friend) {
setTimeout(() => {
commit("nameToUppercase", friend);
}, 1500);
},
//也可以这样写，传入vue组件的实例 context
nameToUppercase(context, friend) {
setTimeout(() => {
context.commit("nameToUppercase", friend);
}, 1500);
}
}
//在组件中调用
methods: {
uppercaseName() {
this.$store.dispatch("nameToUppercase", "gs");
},
}
//在一个 actions 方法中，可以调用另一个 actions 方法
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
****==利用 async / await 实现组合 action==****
- 通过使用 async / await 语法和 promise 对象，实现异步操作的同步写法
- 如下，实现2s后给name添加"789"，再过1s后将英文字母大写
//在store中定义mutations方法
mutations: {
nameToUppercase(state, friend) {
state.data.fullName = (state.data.fullName + friend).toUpperCase();
},
nameAddmore(state, str) {
state.data.fullName = state.data.fullName + str;
}
}
//在store中定义actions方法
actions: {
async nameAddmore({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("add 789");
commit("nameAddmore", "789");
resolve()
}, 2000)
})
},
async nameToUppercase({ commit, dispatch }, friend) {
await dispatch('nameAddmore');
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("uppercase name");
commit("nameToUppercase", friend);
resolve()
}, 1000)
})
}
}
//在组件中调用，可见已经隐藏了所有内部实现
methods: {
uppercaseName() {
this.nameToUppercase("gsaaaa").then(() => {
console.log("all completed");
});
},
}
//执行结果
//2s打印 add 789，显示 zhangkai789
//再1s打印 uppercase name 显示 ZHANGKAI789
//最后打印 all completed 显示 ZHANGKAI789
mapActions 辅助函数的映射
- 在组件中使用时，需要引入对象 import { mapActions } from "vuex"
- 如下例，将 this.nameToUppercase() 映射为 this.$store.dispatch('nameToUppercase')
- 这样，在组件中的其它方法中，就可以方便引用了
//声明
actions: {
nameToUppercase({ commit,sate }, friend) {
setTimeout(() => {
commit("nameToUppercase", friend);
}, 1500);
},
}
//在组件中调用
methods: {
...mapActions(["nameToUppercase"]),
//在其它方法中调用映射
uppercaseName() {
// do something...
this.nameToUppercase("gsss");
},
}
【...mapActions语法报错的问题】
- 原因是缺乏对 es6 语法 rest-spread 的支持，解决办法如下
#安装依赖
npm install --save-dev babel-plugin-transform-object-rest-spread
#在 .babelrc 配置文件中新增
{ "plugins": ["transform-object-rest-spread"] }
Module | 模块
更多功能参考
- vuex 允许我们将 store 分割成模块
- 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
- 对每个模块设置 namespaced 属性，可以防止多个模块的方法重名。因为如果不设置，除了 state ，mutation 等方法会注册在主模块上
- state 的模块调用方式，例如zk模块：this.$store.state.zk.name
- mutations 的模块调用方式为【目录式】，例如模块zk：this.$store.commit("zk/setName", "lili")
//moduleA
const moduleA = {
namespaced: true,
state: {
name: "zk",
age: 22
},
mutations: {
setName(state, newName) {
state.name = newName;
},
},
}
export default moduleA;
//moduleB
const moduleB = {
namespaced: true,
state: {
name: "gs",
age: 18
},
mutations: {
setName(state, newName) {
state.name = newName;
},
},
}
export default moduleB;
//主模块
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './moduleA'
import moduleB from './moduleB'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
zk: moduleA,
gs: moduleB
}
})
//在Vue根实例上注册 store
import store from "./store";
new Vue({
el: "#app",
store,
router: router,
render: h => h(App)
});
//在组件中使用
computed: {
zkName() {
return this.$store.state.zk.name;//注意 state 的模块调用方式
},
gsName() {
return this.$store.state.gs.name;//注意 state 的模块调用方式
}
},
methods: {
setZkName() {
this.$store.commit("zk/setName", "lili");//注意 mutations 的模块调用方式为【目录式】
},
setGsName() {
this.$store.commit("gs/setName", "bebe");//注意 mutations 的模块调用方式为【目录式】
},
}