Quasar 中使用Vuex的方法和步骤

** 首先根据Quasar-cli创建出来的项目会自带Vuex我们只需让让自行安装即可**
Quasar 中使用Vuex的方法和步骤_第1张图片
如图所示就是Quasar-cli自行创建出来的Vuex
第一步:
Quasar 中使用Vuex的方法和步骤_第2张图片
如图所示: 在自行生成中的index.js中进行引入我们自己创建的user文件最后在通过 return的把他们都暴露出去

第二步:
在需要用到Vuex的地方进行以下如图所示的步骤操作
与i
如图所示: 首先我们先通过let创建出一个新的对象在新的对象中创建一个新的数据名最后把新的数据等同于我们创建的数据名就可以了.
回顾上一步我们已经把store中的user通过return暴露出去了 这里我们就可以直接使用,通过dispatch把我们新创建的对象放入进去就可以了.

第三步:
如图所示: 这个时候我们在进去到user文件中的 actions.js中
Quasar 中使用Vuex的方法和步骤_第3张图片
注意:这个里面的"signeddex"是自行创建的 和上一步的"signeddex"是一样的

第四步:
如图所示:然后我们在进入到getters.js文件中这里就都是固定的写法
在这里插入图片描述
如图所代表的意思就是一些逻辑

第五步:
如图所示:然后我们在进入到index.js文件中去,这里的也是固定的写法
Quasar 中使用Vuex的方法和步骤_第4张图片
如图所示:这里就代表的是把相关的文件引入进来

第六步:
如图所示:这一步我们进入到mutations.js文件中去
Quasar 中使用Vuex的方法和步骤_第5张图片
注意: 这里的"SIGN"和我们第三步中的"SIGN"是一样的紧接着我们在通过localStorafe中的setItem的方法把我们最开始获取到的数据就可以直接放入进浏览器的内存当中去了

第七步:
如图所示:最后我们进去到state.js的文件中去
Quasar 中使用Vuex的方法和步骤_第6张图片
如图所示:我们我们首先通过let创建一个localUsername的变量并把浏览器内存中的数据通过getItem的方法拿出来然后给他,最后我们在新创建一个username最后把他暴露出去就可以了

第八步:
如图所示:在需要使用的地方就可以直接使用了
Quasar 中使用Vuex的方法和步骤_第7张图片
注意:在每一次使用的时候都必须在使用的这一页代码中添加这两个蓝色所示的代码,最后就可以直接使用差值表达式来进去使用就好了

你可能感兴趣的:(Quasar 中使用Vuex的方法和步骤)