vue项目中通过vuex管理数据

目录

1.前言:

2.vuex的基础用法:

1.构建与挂载vue

基础模板渲染

构建仓库

2.mutations的使用

1.介绍

​编辑

2.案列:

3.传参

4.辅助函数mapMutations:

3.module分对象的写法

介绍

建立模块:

访问数据的方式:

介绍

直接访问

模块导入访问

关于getters/setter


1.前言:

vuex相当于储存在页面后台的数据库。可以供全部组件访问到,相当于全局变量。便于多层级的

vue项目中通过vuex管理数据_第1张图片

2.vuex的基础用法:

1.构建与挂载vue

基础模板渲染

注意:文件存放的位置。

vue项目中通过vuex管理数据_第2张图片











vue引入

在store.index.js编写如下代码

vue项目中通过vuex管理数据_第3张图片

App.vue






在控制台中检测是否挂载成功。因如图一所示。

vue项目中通过vuex管理数据_第4张图片

构建仓库

直接导入

在state下定义数据。

vue项目中通过vuex管理数据_第5张图片

vue项目中通过vuex管理数据_第6张图片

vue项目中通过vuex管理数据_第7张图片

函数导入

前言:

vue项目中通过vuex管理数据_第8张图片

vue项目中通过vuex管理数据_第9张图片案列:

...manstate的作用就是将数组内的值全挂载到computed中

vue项目中通过vuex管理数据_第10张图片

vue项目中通过vuex管理数据_第11张图片

vue项目中通过vuex管理数据_第12张图片

2.mutations的使用

1.介绍

store的数据也是下行数据,使用数据的组件不能直接对数据进行修改。要完成修改需要通过mutations进行修改。

vue项目中通过vuex管理数据_第13张图片

2.案列:

vue项目中通过vuex管理数据_第14张图片

vue项目中通过vuex管理数据_第15张图片

结果:

vue项目中通过vuex管理数据_第16张图片

3.传参

vue项目中通过vuex管理数据_第17张图片

vue项目中通过vuex管理数据_第18张图片

传参的时候,只能接受一个数据的输入,所以在输入多个数据的时候要把它们打包为一个对象。

vue项目中通过vuex管理数据_第19张图片

vue项目中通过vuex管理数据_第20张图片

vue项目中通过vuex管理数据_第21张图片

数据的双向绑定

vue项目中通过vuex管理数据_第22张图片

案列:

通过input改变,当方生变化时通知vuex变化。

vue项目中通过vuex管理数据_第23张图片

vue项目中通过vuex管理数据_第24张图片

vue项目中通过vuex管理数据_第25张图片

4.辅助函数mapMutations:

vue项目中通过vuex管理数据_第26张图片

actions与gettrs的用法

vue项目中通过vuex管理数据_第27张图片

vue项目中通过vuex管理数据_第28张图片

vue项目中通过vuex管理数据_第29张图片

3.module分对象的写法

介绍

vue项目中通过vuex管理数据_第30张图片

建立模块:

模块文件建立

vue项目中通过vuex管理数据_第31张图片

// user模块
const state = {
  userInfo: {
    name: 'zs',
    age: 18
  },
  score: 80
}
const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}
const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文,默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}
const getters = {
  // 分模块后,state指代子模块的state
  UpperCaseName (state) {
    return state.userInfo.name.toUpperCase()
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

index中配置vue项目中通过vuex管理数据_第32张图片

son1直接访问

vue项目中通过vuex管理数据_第33张图片

访问数据的方式:
介绍

vue项目中通过vuex管理数据_第34张图片

直接访问

vue项目中通过vuex管理数据_第35张图片

案列:

右下角可以看到root中包括的数据,其中处于一级的是可以直接引入的。user,title。

vue项目中通过vuex管理数据_第36张图片

将user已对象的形式引入

vue项目中通过vuex管理数据_第37张图片

访问值

vue项目中通过vuex管理数据_第38张图片

模块导入访问

23行导入user模块,再导入其内部的数据

vue项目中通过vuex管理数据_第39张图片

添加标记namespace等于true

vue项目中通过vuex管理数据_第40张图片

关于getters/setter

直接访问与state并不一样

vue项目中通过vuex管理数据_第41张图片

vue项目中通过vuex管理数据_第42张图片

vue项目中通过vuex管理数据_第43张图片

你可能感兴趣的:(vue.js,前端,javascript,前端框架,vue,css)