网站建设后期修改,杭州科技公司,性价比高的seo网站优化,网站建设的人员组织1.简介(1)vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库vuex是为vue.js开发的状态管理模式、组件状态集中管理(2)单页面数据流状态发生变化, 视图就重新渲染state发生变化时, 导致view视图发生改变, 视图通过操作action行为, 又会使得state状态发生变化(3)使用场…1.简介(1)vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库vuex是为vue.js开发的状态管理模式、组件状态集中管理(2)单页面数据流状态发生变化, 视图就重新渲染state发生变化时, 导致view视图发生改变, 视图通过操作action行为, 又会使得state状态发生变化(3)使用场景多个试图依赖于同一状态来自不同试图的行为需要变更同一状态2.使用(1)安装 npm i vuex -save-dev(2)创建保存数的容器store//main.js文件中
// 引入
import { createStore } from vue
// 创建Store vuex实例
const store createStore({state(){return{count: 0}}
})
// 注册全局组件
app.use(store)(3)state获取store中的数据在vue组件中通过 this.$store访问store实例, 通过实例的state属性获取对象通过$store.state 获取数据, 无论在哪个组件都可以获取, 无需传递数据方式1: 在模板语法中直接使用, 不需要添加this!-- 选项式API --
divfirst---{{ $store.state.count }}/div
!-- 组合式API --方式2: 通过计算属性的方式使用templatedivfirstName----{{ first }}/divdivsecondName----{{ second }}/div
/template
scriptexport default{computed: {first(){return this.$store.state.firstName}}}
/script方式3: 使用辅助函数 mapStatecomputed: mapState({first: state state.first,// 不能使用箭头函数, 箭头函数中的this指向的是函数定义位置的上下文this// 如果想使用this, 需使用普通函数second(state){return state.secondName this.preName}
}),方式4: 当计算属性名称与store中的数据名称一样computed: mapState([firstName,secondName]),方式5: 使用解构的形式 既可以包含各自组件中的计算属性, 也可使用store中的数据computed: {newList(){return this.preName},// 解构出来, 相当于写了几个函数...mapState({first: state state.first,second(state){return state.secondName this.preName}})
},(4)定义getters可以认为是 store 的计算属性, 对状态的一个值进行计算后得到新的值//直接在组件中使用
div{{ $store.getters.newName }}/divgetters: {newName (state){return state.firstName.toUpperCase()},newSecond(state,getters){return getters.newName bbbb}
},// 使用getters
...mapGetters([newName,newSecond])divnewName----{{ newName }}/div(5)mutation修改数据(同步)不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation, mutation必须是同步函数 // 修改, 转变, 改变, 修改mutations: {// 每一个mutation 都必须是一个同步函数, 不能是异步: 如果是异步,页面刷新后,数据才更新// 每个方法都有一个state参数表示state返回的对象updateData(state){console.log(state);state.count},// 第一个参数必须是state, 从第二个参数开始是载荷 payLoad// changeMsg(state, news){// news state.firstName// state.msg news // }// 使用 调用时传递的参数changeMsg(state, payLoad){state.msg payLoad.news }},使用 methods:{// 方式 1 : add(){// 修改数据只能通过 commit// 更新数据 调了 store中的mutations的updateData方法this.$store.commit(updateData)},// 方式 2 change(){this.$store.commit({type: changeMsg,news: hahaha})}}(6)actions修改数据(异步) mutations: {updateData(state){console.log(state);state.count},},// 可包含任意异步操作, Action 提交的是 mutation而不是直接变更状态。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象可调用 context.commit 提交一个 mutation或者通过 context.state 和 context.getters 来获取 state 和 gettersactions: {// context 上下文 接受一个与 store 实例具有相同方法和属性的 context 对象 可接受参数, 从第二个参数开始为载荷dispatchMsg (context) {context.commit(updateData)}},使用时, 通过dispatch分发methods:{disMsg(){this.$store.dispatch(dispatchMsg)// 以载荷形式分发/* this.$store.dispatch(incrementAsync, {amount: 10})// 以对象形式分发this.$store.dispatch({type: incrementAsync,amount: 10}) */},
}(7)辅助函数import { mapState,mapGetters, mapMutations, mapActions } from vuexmapState[computed]mapGetters[computed]mapActions[methods]mapMutations[methods]官方文档:https://vuex.vuejs.org/zh/installation.html
