一、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 文件太大的问题,可以采用 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 的时候到了。