使用store管理数据 (vuex)—什么是vuex?基本使用/实现过程图/什么时候使用/优势

时间:2021-1-8 作者:admin

什么是 vuex ?

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
  • 它采用集中式存储管理应用的所有组件的状态,
  • 并以相应的规则保证状态以一种可预测的方式发生变化。

(必须按照规定的方式改变数据)

store的基本使用

  1. 数据放在哪里 store state 里面
  • 创建仓库, nuxt 框架已经封装好各种引入, 所以可以直接使用, 只需要创建文件即可

  1. 如何存入/更新数据 可以在 store state 里面初始化 / 调用 mutation 函数进行数据改造
  • 存储时跟data写法相类似,使用函数的方式是为了复用使用防止污染
  • 必须规定方式修改,不能随意赋值
export const state = () => {
    return {
        abc: 123
    }
}


//修改state里面的数据,必须使用mutations里面的函数
export const mutations = {
    setAbc(state, data) {
        //每个mutation函数都可以接受到两个参数
        //第一个是state对象本身
        //第二是调用函数是额外添加的数据
        //这里需要做的就是改变state数据
        state.abc = data
        //这样外面调用这个函数,并且传入数据,即可改变当前的abc属性
    }
}
  1. 获取数据 this.$store.state.模块名.字段名
  • 如果是在data中那就加this,模板则不需要
  • $store.state是固定写法
  {{ $store.state.userstore.abc }}

效果

4.对数据进行修改的使用

  • 需要使用 commit 的方式调用 mutation
  • 调用时需要两个参数,第一个是mutaion 的路径,包括文件名和函数名,中间用反斜杠隔开
  • 第二个是你想要传进去的 data 数据
  • this.$store.commit('文件名/函数名',传入的data数据)
 mounted() {
    console.log(this.$store.state.userstore.abc); //123
    //这里调用延时器为了演示变化效果
    setTimeout(() => {
      // 需要使用 commit 的方式调用 mutation
      // 调用时需要两个参数,第一个是mutaion 的路径,包括文件名和函数名,中间用反斜杠隔开
      // 第二个是你想要传进去的  data 数据
      //this.$store.commit('文件名/函数名',传入的data数据)
      this.$store.commit("userstore/setAbc", 666);
    }, 2000);
  },

store实现过程图

什么时候需要用到vuex?

  • 当遇到大型项目时,希望数据安全性提高,不能随意变更时可以考虑使用vuex.如果是小型项目不建议使用,会使代码变得冗余.

优势

  • js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
  • 属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会)
  • 限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。