Vuex②(搭建环境、开发者工具、求和案例)

Vuex②(搭建环境、开发者工具、求和案例)

文章目录

​​搭建Vuex的运行环境​​​​Vuex版求和案例​​​​Vuex开发者工具使用​​

搭建Vuex的运行环境

首先我们使用：

npm i vuex

来安装Vuex

现在vue3成为了默认版本，所以我们使用如上的命令安装的是vuex的4版本 vue2中，要用vuex的3版本 vue3中，要用vuex的4版本 如果你使用的是vue2，那么你安装vuex的命令为：​​​npm i vuex@3​​

然后我们在main.js中引入，并使用use来使用这个插件：

import Vuex from 'vuex'Vue.use(Vuex)

完成了上面的步骤之后，我们就可以在创建vm(或者组件实例对象vc)的时候传入一个store配置项，这个配置项在vm(或者组件实例对象vc)中体现为$store。

接下来最关键的一步：我们要创建这个store。我们单独把它写在一个js文件中。

index.js:

//该文件用于创建Vuex中最为核心的store//引入Vueximport Vuex from 'vuex'//准备actions——用于响应组件中的动作const actions = {}//准备mutations——用于操作数据（state）const mutations = {}//准备state——用于存储数据const state = {}//创建并暴露storeexport default new Vuex.Store({ actions, mutations, state,})

接下来我们把写好的store放在vm身上：

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falseimport Vuex from 'vuex'import store from 'store/index'Vue.use(Vuex)new Vue({ render: h => h(App), store}).$mount('#app')

如果这样的话最后运行时会报错的:

也就是说​​Vue.use(Vuex)​​​要在​​import store from 'store/index'​​这句话之前进行，那么我们这样修改：

注意：在脚手架里面，它会先把所有的import语句按照顺序先执行完，再去执行其他语句！ 所以你不能单纯的调换两个语句的位置去改变他们两句话的执行顺序。

正确的修改方式： index.js:

//该文件用于创建Vuex中最为核心的storeimport Vue from 'vue'//引入Vueximport Vuex from 'vuex'//准备actions——用于响应组件中的动作const actions = {}//准备mutations——用于操作数据（state）const mutations = {}//准备state——用于存储数据const state = {}Vue.use(Vuex)//创建并暴露storeexport default new Vuex.Store({ actions, mutations, state,})

main.js:

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falseimport store from 'store/index'new Vue({ render: h => h(App), store}).$mount('#app')

接下来我们就可以在任意vm或组件实例上看到$store:

Vuex版求和案例

我们之前使用的是​​Vue版进行编写​​，接下来我们使用Vuex进行编写。

Count组件：

index.js:

//该文件用于创建Vuex中最为核心的storeimport Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备actions——用于响应组件中的动作const actions = { /* jia(context,value){ console.log('actions中的jia被调用了') context.commit('JIA',value) }, jian(context,value){ console.log('actions中的jian被调用了') context.commit('JIAN',value) }, */ jiaOdd(context,value){ console.log('actions中的jiaOdd被调用了') if(context.state.sum % 2){ context.commit('JIA',value) } }, jiaWait(context,value){ console.log('actions中的jiaWait被调用了') setTimeout(()=>{ context.commit('JIA',value) },500) }}//准备mutations——用于操作数据（state）const mutations = { JIA(state,value){ console.log('mutations中的JIA被调用了') state.sum += value }, JIAN(state,value){ console.log('mutations中的JIAN被调用了') state.sum -= value }}//准备state——用于存储数据const state = { sum:0 //当前的和}//创建并暴露storeexport default new Vuex.Store({ actions, mutations, state,})

注意点：

在模板中呈现共享数据，要在$store中的state对象中去寻找actions中的方法有两个参数，其中context代表上下文，你也可以把它理解成一个mini版的store，借助这个上下文你可以更好的编写事务逻辑

注意： 我们前面说过在上下文中可以拿到state，既然这样我们干嘛不直接在actions方法中就把数据修改了？

首先这样写代码是可以运行的，但是开发者工具会失效。这种写法是及其不推荐的！

Vuex开发者工具使用

因为Vuex的开发团队与Vue是同一个，他们的开发者工具在同一个地方，其中vuex位于第二栏：

Base State里面记录的是state里面的初始数据，就拿我们刚才的案例来说：

当我们按＋之后，上面会显示你的mutations操作：

这也印证了如下所示的图：开发者工具是与mutations直接对话的。(你actions里面的操作被触发了，是不会被捕获的)

我们再多点几次＋，我们可以选取任意一次查看，但是绿色框永远对应现在页面的状态：

接下来我们把鼠标悬浮在其中一个mutations方法上，会发现有几个按钮：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。