vue项目中通过vuex管理数据

目录

1.前言：

2.vuex的基础用法：

1.构建与挂载vue

基础模板渲染

构建仓库

2.mutations的使用

1.介绍

​编辑

2.案列：

3.传参

4.辅助函数mapMutations：

3.module分对象的写法

介绍

建立模块：

访问数据的方式：

介绍

直接访问

模块导入访问

关于getters/setter

---

1.前言：

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

2.vuex的基础用法：

1.构建与挂载vue

基础模板渲染

注意：文件存放的位置。

vue引入

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

App.vue

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

构建仓库

直接导入

在state下定义数据。

函数导入

前言：

案列：

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

2.mutations的使用

1.介绍

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

2.案列：

结果：

3.传参

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

数据的双向绑定

案列：

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

4.辅助函数mapMutations：

actions与gettrs的用法

3.module分对象的写法

介绍

建立模块：

模块文件建立

// 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中配置

son1直接访问

访问数据的方式：

介绍

直接访问

案列：

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

将user已对象的形式引入

访问值

模块导入访问

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

添加标记namespace等于true

关于getters/setter

直接访问与state并不一样