vuex简单使用方式

使用store管理数据（vuex）

什么是vuex？

• Vuex是一个专门为Vuex.js应用程序开发的状态管理模式
• 它采用集中式存储 管理 应用的所有组件的状态
• 并以相应的规则保证状态以一种可预测的方式发生变化（必须按照规定的方式改变数据）

面对一个存储状态数据的工具时，有几个方面的问题我们马上可以想到的

• 数据放在哪里 ？ store state里面
• 如何存放/更新数据 ？ 可以在store state 里面初始化/调用mutation函数进行数据改造
• 如何获取数据 ？ this.$store.state.模块名字.字段名

概念

vuex的三个概念：

1. store仓库
   创建仓库，如果创建nuxt 框架时已经封装好各种引入，可以直接使用，只需要创建文件即可
   

2. state状态，所有数据
   
   如何在组件当中显示一个state数据
   this.$store.state.模块名.字段名

this.$store.state.user/abc

3. mutation 规定对数据进行修改的方法

a.创建

export const mutations = {
//mutations 是一个对象
//里面的每一个属性都是一个函数
//这里的函数专门用来修改这个仓库的数据 state
setAbc(state,data){
//所有mutation 函数都可以接受两个参数
//第一个是state对象本身
//第二个是外面调用时传入的数据
//我们现在想要修改abc
state.abc = data
    }
 }

b.使用

    // this.$store.state.user.abc = 321 直接复制是不行的
    // 需要使用 commit 的方式调用 mutation
    // 调用时需要两个参数,第一个是mutaion 的路径,包括文件名和函数名,中间用反斜杠隔开
    // 第二个是你想要传进去的  data 数据
    setTimeout(() => {
      this.$store.commit('user/setAbc', 321);
    }, 1000);

优势

• js原生的数据对象写法，比起localStorage不需要做转换，使用方便
• 属于vue生态一环，能够触发响应式的渲染页面更新（localStorage就不能实现响应式渲染页面更新）
• 限定了一种可预测的方式改变数据，避免大项目中，数据不小心的污染

跟localstorage对比的话：

• localStorage.getItem 类似于 this.$store.state.xxx

• localStorage.setItem 类似于 this.$store.commit()