Vuex 进阶
一、Vuex 是什么
Vuex 是 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
二、项目结构
Vuex 不限制代码架构，但是它规定了一些需要遵循的规则
├── index.html
├── main.js
├── App.vue
├── api
│ └── # 抽取出API请求
├── components
│ └── … # 抽取出的组件
├── view
│ └── … # 具体页面
└── store
│ ├── index.js # 组装模块
│ ├── actions.js # 根级别的 action
│ ├── mutations.js # 根级别的 mutation
│ └── modules
│ ├──… # 抽取的模块- 应用层级的状态应该集中到单个 store 对象中。
- 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
- 异步逻辑都应该封装到 action 里面。
大型项目或 store 文件太大的问题，可以采用 action、mutation、getter 分割到单独的文件的方式解决。
三、组合式API
可以在 setup 钩子函数中，通过 useStore() 来访问 store。
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
setup() {
const store = useStore();
return {
// 在 computed 函数中访问 state
count: computed(() => store.state.count),
// 在 computed 函数中访问 getter
double: computed(() => store.getters.double),
// 使用 mutation
increment: () => store.commit("increment"),
// 使用 action
asyncIncrement: () => store.dispatch("asyncIncrement"),
};
},
computed: {
},
}
</script>四、严格模式
开启严格模式，仅需在 store 创建时加入 strict: true。在严格模式下，任何不是由 mutation 函数引起的状态变更，都将抛出错误。
const store = createStore({
state() {
strict: process.env.NODE_ENV !== 'production'
})五、表单处理
在严格模式中使用 v-model 会比较棘手
<input v-model="obj.message">假如 obj 是 vuex store 的对象，当用户输入时，v-model 会试图直接修改 obj.message。在严格模式中这个修改没有通过 mutation 函数执行，会直接抛出错误。
可以使用 setter 双向绑定计算属性来解决。
<input v-model="message" />
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}六、总结
当你的 Vue.js 应用程序的状态开始杂乱无章的时候，那么就是使用 Vuex 的时候到了。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-06-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
