企业网站建设账务处理,大学生网站建设实训报告,可视化app开发工具安卓版,建模培训班Vuex 各子模块的内部结构及作用 这是vuex的内部代码结构#xff0c;所有的子模块都是一样的
state#xff1a;存放数据状态#xff1b;
action#xff1a;指派 mutation #xff1b;
mutation#xff1a;修改state里面的状态#xff1b;
getter#xff1a;侧重于对数据…Vuex 各子模块的内部结构及作用 这是vuex的内部代码结构所有的子模块都是一样的
state存放数据状态
action指派 mutation
mutation修改state里面的状态
getter侧重于对数据的再次加工
mdules用于模块化Store 仓库是使用Vuex应用程序的核心每一个应用仅有一个 Store。Store 是一个容器包含应用中的大部分状态不能直接改变 Store 中的状态要通过提交 Mutation 的方式
State 状态保存至 Store 中因为 Store 是唯一的因此状态也是唯一的称为单一状态树。但是如果所有的状态都保存在 State 中程序则难以维护可以通过后续的模块来解决该问题。注意这里的状态时响应式的
Getter 像是 Vue 中的计算属性对 state 中的数据进行加工方便从一个属性派生出其他的值。它内部可以对计算的结果进行缓存只有当依赖的状态发生改变时才会重新计算
Mutation 状态的变化必须通过提交 Mutation 来完成 同步
Action 和 Mutation 类似不同的是 Action 可以进行异步操作内部改变状态的时候都需要提交 Mutation
Module 模块由于使用单一状态树应用的所有状态会集中到一个比较大的对象上来当应用变得非常复杂时Store对象就有可能变得非常臃肿。为了解决这个问题Vuex允许我们将 Store 分割成模块每个模块拥有自己的 State 、Mutation、Action、Getter甚至是嵌套的子模块一般使用时目录结果 src下新建store文件夹文件夹下新建 index.js import Vue from vue
import Vuex from vuex
Vue.use(Vuex)
export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {}
})
// 或者利用子模块
import Vue from vue
import Vuex from vuex
import user from ./modules/user
Vue.use(Vuex)
const store new Vuex.Store({modules: {user}
})
export default storesrc下新建store文件夹文件夹下新建 modules 文件夹下面新建子模块user.js const user {strict: true, // 开启严格模式后直接在组件中修改state时会报错但数据仍然改变成功如果不开启就不会报错namespaced: true, // 开启命名空间防止多个模块文件之间的命名冲突state: {},mutations: {},actions: {},getters: {}
}
export default usermain.js 中引入 import Vue from vue
import App from ./App.vue
import store from ./store
new Vue({store,render: h h(App)
}).$mount(#app)使用 // 主模板中使用
this.$store.state.xxx
this.$store.getters.xxx
this.$store.dispatch(LogOut)
// 子模版中使用
this.$store.state.user.xxx
this.$store.getters.xxx
this.$store.dispatch(user/LogOut, size)实例 templatediv classcontentViews styletext-align: left;el-card classbox-card姓名: {{ crjName }} - {{ $store.state.user.crjName }}br /年龄: {{ $store.state.user.crjAge }} - {{ crjAge }}br /vuex 计算属性{{ currentCrjName }}br /token: {{ token }} - {{ $store.state.user.token }}br /{{ avatar }}el-button typeprimary sizesmall click.nativegetMapActions改变姓名 mapActions/el-buttonel-button typeprimary sizesmall click.nativegetMapMutations改变姓名 mapMutations/el-buttonel-button typeprimary sizesmall click.nativetc退出/el-buttonel-button typeprimary sizesmall click.nativetc1退出/el-button/el-card/div
/templatescript
// 1.引入辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from vuex;
export default {computed: {...mapState(user, [crjName, crjAge]),...mapGetters(user, [currentCrjName]),...mapState({name:crjName, age: crjAge})...mapState({avatar: a a.user.avatar}), // 这里想要访问根模块里面的方法 需要这样写后面加上 {root:true}...mapGetters([token]),...mapGetter({token: token})...mapActions([LogOut])},methods: {// 2使用...mapActions(user, [setCrjName]),...mapMutations(user, [commitCrjName]),// 这里想要访问根模块里面的方法 需要这样写后面加上 {root:true}...mapMutations({commitCrjName: commitCrjName})getMapActions() {this.setCrjName(李四);},getMapMutations() {this.commitCrjName(马武);},tc() {this.LogOut.then(() {location.href /;})},tc1() {this.$store.dispatch(FedLogOut).then(() {location.href /;})},}
};
/scriptVuex中actions的使用 actions属性是用来处理异步方法的通过提交mutations实现。Action| Vuex API 参考 | Vuex 说明
Vuex 中的 mutation 非常类似于事件每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方并且它会接受 state 作为第一个参数。
特点
1.异步操作通过mutations来改变state。
2.不能直接改变state里的数据。
3.包含多个事件回调函数的对象。
4.执行方式通过执行 commit()来触发 mutation 的调用, 间接更新 state
5.触发方式: 组件中: $store.dispatch(‘action 名称’, data1)
6.可以包含异步代码(例如定时器, 请求后端接口)。
使用
// 直接使用
this.$store.dispatch(actions方法名, 具体值) // 不分模块
this.$store.dispatch(模块名/actions方法名, 具体值) // 分模块
// mapActions
import { mapActions } from vuex
export default {computed: {// 不分模块...mapActions([actions方法名]) // 分模块不改方法名...mapActions(模块名, [actions方法名])// 分模块不改方法名...mapActions(模块名,{新actions方法名: 旧actions方法名})}
}实例 script
import { mapActions } from vuex
export default {computed: {...mapActions([LogOut])},methods: {fedLogOut() {this.$store.dispatch(FedLogOut).then(() {location.href /;})},logout() {this.LogOut.then(() {location.href /;})}}
}
/script
