公司内部交流 网站模板,wordpress 360加速插件,wordpress抱歉您不能上传文件,网站结构设计一、什么是Vuex Vuex就是一个vue的状态#xff08;数据#xff09;管理工具#xff0c;是vue项目实现大范围数据共享的技术方案。能够方便、高效的实现组件之间的数据共享。 Vuex的好处#xff1a; #xff08;1#xff09;数据的存储一步到位#xff0c;不需要层层传递…一、什么是Vuex Vuex就是一个vue的状态数据管理工具是vue项目实现大范围数据共享的技术方案。能够方便、高效的实现组件之间的数据共享。 Vuex的好处 1数据的存储一步到位不需要层层传递 2数据的流动十分清晰 3存储在Vuex中的数据都是响应式的数据更新后使用数据的组件也会自动更新
适合存储到Vuex中的数据----需要共享的数据
Vuex的使用场景 频繁、大范围的数据共享。 1某个状态在很多个组件中使用 2多个组件共同维护一份数据 二、Vuex的安装及配置 1、执行以下命令安装Vuex 注我的项目是vue2的项目所以安装的是3.6.2版本的vuex
npm i vuex3.6.2 2、新建src/store/index.js专门存放vuex 在src目录下新建store文件夹并在store文件夹下新建index.js文件 3、创建仓库 index.js 内容如下
// 导入 vue
import Vue from vue
// 导入 vuex
import Vuex from vuex
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)// 创建仓库实例对象 store
const store new Vuex.Store()// 导出仓库对象
export default store 4、挂载到main.js中 在main.js中导入并挂载到Vue示例上 main.js中的内容如下
import Vue from vue
import App from ./App.vue
import store from ./storeVue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app) 4、测试仓库是否创建成功 在App.vue中打印store对象控制台查看结果
created(){console.log(this.$store)
} 若控制台输出如下内容则代表创建仓库成功 三、state的基础使用 state作用state属性的值是一个对象用于存储全局共享的数据。 1、存储数据 在store/index.js中添加如下内容
const store new Vuex.Store({//这里配置vuex// state 用于存储数据存储状态Vuex状态管理state: {age: 18,name: Tom,list: [{ id: 1, name: John, isDone: true },{ id: 2, name: Juliy, isDone: true },{ id: 2, name: Lily, isDone: true },],},
}) 2、vue页面中使用 div组件1p{{ $store.state.name -- $store.state.age }}/p/div 3、js中使用
import store from /storeconsole.log(store.state.age) 4、 结果 5、严格模式 开启严格模式防止在组件中直接修改state数据开启后若直接修改state数据会报错 开启方法
const store new Vuex.Store({//这里配置vuex// 开启严格模式防止在组件中直接修改state数据strict: true,
})
四、mutations的基础使用 mutations作用 修改state数据且是修改state数据的唯一途径 1、定义方法 在store/index.js中添加如下内容
const store new Vuex.Store({mutations: {updateAge (state, newAge) {state.age newAge},},
}) 2、vue页面中使用
button click$store.commit(updateAge, 20)更新年龄/button 3、结果 页面点击更新年龄按钮页面中年龄会发生变化 五、actions的基础使用 mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化) actions则负责进行异步操作。 1、定义方法 在store/index.js中添加如下内容
const store new Vuex.Store({// mutations里面放同步方法mutations: {updateAge (state, newAge) {state.age newAge},},// actions里面放异步方法actions: {updateAgeAfter3s (store, newAge) {setTimeout(() {// 只有mutations可以修改数据所以这里调用mutations的方法store.commit(updateAge, newAge)}, 3000)},},
}) 2、vue页面中的使用
button click$store.dispatch(updateAgeAfter3s, 30)3s后更新年龄/button 3、结果 页面点击3s后更新年龄按钮页面中年龄会在3s后发生变化 六、getters的基础使用 getters作用getters是Vuex中的计算属性和组件中的计算属性意义一样但不支持set修改 1、定义方法 在store/index.js中添加如下内容 // 为了方便获取state中的数据vuex会给每个计算属性的方法传递一个state参数getters: {ageComputed (state) {return state.age * 2},}, 2、vue页面中使用
p{{ $store.getters.ageComputed }}/p 3、结果 七、借助辅助方法使用state和getters mapState和mapGetters是辅助函数帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便的用法。 store/index.js中的内容不变还是上方的内容只有vue页面的使用需要修改。 1、 导入mapState和mapGetters
import { mapState, mapGetters } from vuex 2、利用展开运算符映射到computed计算属性中 computed: {...mapState([age, name]),...mapGetters([ageComputed]),}, 注若state中字段名与data中字段名重复可采用以下方法引入
...mapState({ ages: age, uname: name }) 3、vue页面中使用
p{{ ages --- uname }}/p
p{{ ageComputed }}/p 4、结果 八、借助辅助方法使用mutations和actions mapMutations和mapActions把位于mutations和actions中的方法提取了出来我们可以将它导入到methods中方便使用。 1、导入mapMutations和mapActions
import { mapMutations, mapActions } from vuex 2、利用展开运算符映射到methods方法中 methods: {...mapMutations([updateAge]),...mapActions([updateAgeAfter3s]),}, 3、vue页面中使用
button clickupdateAge(22)更新年龄/button
br /
button clickupdateAgeAfter3s(24)3s后更新年龄/button 4、结果 九、vuex模块化---modules 由于使用单一状态树应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。 即如果把所有的状态都放在state中当项目变得越来越大的时候Vuex会变得越来越难以维护。 由此又有了Vuex的模块化。 1、模块定义 在store文件夹下新建modules文件夹在modules文件夹中新建user.js和todo.js文件文件目录如下 user.js 的内容如下
// 存储用户相关数据
export default {// 开启命名空间必须的操作namespaced: true,// state 用于存储数据存储状态Vuex状态管理state: {age: 18,name: Tom,},// mutations是修改state数据的唯一途径// 所有方法不支持一步更新只支持同步方法mutations: {updateAge (state, newAge) {state.age newAge},},// actions里面放异步方法actions: {updateAgeAfter3s (store, newAge) {setTimeout(() {// 只有mutations可以修改数据所以这里调用mutations的方法store.commit(updateAge, newAge)}, 3000)},},// getters是Vuex中的计算属性和组件中的计算属性意义一样但不支持set修改// 为了方便获取state中的数据vuex会给每个计算属性的方法传递一个state参数getters: {ageComputed (state) {return state.age * 2},},
}todo.js的内容如下
// 存储列表相关数据
export default {// 开启命名空间必须的操作namespaced: true,// state 用于存储数据存储状态Vuex状态管理state: {list: [{ id: 1, name: John, isDone: true },{ id: 2, name: Juliy, isDone: true },{ id: 3, name: Lily, isDone: true },],},
}2、在index.js中导入并注册modules模块 store/index.js 内容如下
// 导入 vue
import Vue from vue
// 导入 vuex
import Vuex from vuex// 导入小模块
import user from ./modules/user
import todo from ./modules/todo// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
// 将vuex注册为插件
Vue.use(Vuex)// 创建仓库 store
// 创建store实例对象
const store new Vuex.Store({// 这里配置vuex// 开启严格模式防止在组件中直接修改state数据strict: true,// modules模块注册modules: {user,todo,},
})// 导出仓库/对象
export default store3、vue页面中直接使用
templatediv组件1p{{ $store.state.user.name -- $store.state.user.age }}/pp{{ $store.getters[user/ageComputed] }}/pbutton click$store.commit(user/updateAge, 20)更新年龄/buttonbr /button click$store.dispatch(user/updateAgeAfter3s, 30)3s后更新年龄/button/div
/templatescript
export default {}
/scriptstyle langless scoped/style 4、利用辅助方法调用
templatediv组件2p{{ age --- name }}/p!-- p{{ ages --- uname }}/p --p{{ ageComputed }}/pulli v-foritem in list :keyitem.id{{ item.name }}/li/ulbr /button clickupdateAge(22)更新年龄/buttonbr /button clickupdateAgeAfter3s(24)3s后更新年龄/button/div
/templatescript
import { mapState, mapGetters, mapMutations, mapActions } from vuex
export default {computed: {...mapState(user, [age, name]),...mapState(todo, [list]),// 若state中字段名与data中字段名重复可采用以下方法引入// ...mapState({ ages: age, uname: name }),...mapGetters(user, [ageComputed]),},methods: {...mapMutations([user/updateAge]),...mapActions([user/updateAgeAfter3s]),},
}
/scriptstyle langless scoped/style十、state、getters、mutations、actions的对比
