Vue —— vuex

vuex 是专门在Vue中实现集中式状态（数据）管理的一个Vue插件
1、安装vuex 执行npm i vuex@3 注意版本 vue2------vuex3;vue3------vuex4
2、引入vuex插件
import Vuex from ‘vuex’
Vue.use(Vuex)

例如：创建一个index.js用于声明vuex实例

//引入Vuex
import Vuex from 'vuex'
// 引入Vue
import Vue from 'vue'
//使用插件
Vue.use(Vuex)
// 准备actions————用于响应组件中的动作
const actions = {}
// 准备mutations————用于操作数据（state）
const mutations = {}
// 准备state————存储数据
const state = {}
//准备getters————用于将state中的数据进行加工 类似于计算属性
const getters = {}
// 创建store
const store = new Vuex.Store({actions,mutations,state,
})// 暴露store
export default store

在main.js文件中创建vue实例时加入vuex实例

// 引入Vue
import Vue from 'vue'
// 引入App
import App from "./App.vue"
// 引入store
import store from './store/index.js'// 关闭Vue的生产提示
Vue.config.productionTip = false// 创建vm
new Vue({el: '#app',render: h => h(App),store,beforeCreate(){Vue.prototype.$bus = this},
})

注意Vue.use(Vuex) 必须在创建store实例之前

在创建vuex实例时声明要是用的方法、属性

// 准备actions————用于响应组件中的动作
const actions = {jia: function(context,value){console.log('actions中的jia',context,value)context.commit('JIA',value) //第一个参数为mutations中的方法名、第二个参数为传递的数据}
}
// 准备mutations————用于操作数据（state）
const mutations = {JIA(state,value){console.log('mutations中的JIA',state,value)state.sum += value}
}
// 准备state————存储数据
const state = {sum: 0,
}
// 创建store
const store = new Vuex.Store({actions,mutations,state,
})
// 暴露store
export default store

通过this.$store.dispatch(“actions中的方法名”,参数)调用actions中的方法

increment(){this.$store.dispatch('jia',this.n)
},

若果actions中的方法没有做任何处理只是把数据直接传递给了mutations中的方法那么可以直接通过this.$store.commit(“mutations 中的方法名”,参数)调用mutations 中的方法
例如

increment(){this.$store.commit('JIA',this.n)
},

// 准备state————存储数据
const state = {sum: 0,
}
//准备getters————用于将state中的数据进行加工 类似于计算属性
const getters = {bigSum(state){return state.sum*10}
}

使用 $store.state.属性名 获取vue state中的属性
通过 $store.getters.方法名 调用getters中的经变化后的数据但是不会改变state中原有的数据
例如

<h1>当前求和为：{{$store.state.sum}}</h1>
<h3>当前求和放大后为：{{$store.getters.bigSum}}</h3>

Vue —— vuex相关推荐

基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
vue vuex vue-router后台项目——权限路由（超详细简单版）
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有最高权限A 他可以看到 red , yellow 和 bl ...
记录一下使用vue/vuex+SSR框架遇到的bug
项目框架:vue+vuex+vue-server-render 问题描述:页面中有个区块通过state.jkyl (JSON Object)来控制是否需要显示,页面未登录前jkyl的数据是为空的,待登 ...
Vue Vuex的详细教程
Vue Vuex的详细教程 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变 ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
Vue vuex vue-router
Vue vuex vue-router 文章目录 Vue vuex vue-router 1.Vuex的使用 2.Vue-router的使用 2.1.基本使用 2.3.路由的跳转 2.3.路由跳转携带 ...
大型项目实战Vue+Vuex+Koa2+Socket.io+Jssdk联合打造无人点餐系统
课程简介此套视频教程为2018年推出的,项目使用Vue+Vuex+Koa2+Socket.io+Jssdk+小票打印机打造无人点餐系统,课程视频.课件.源码齐全,手把手教会学员用Vue开发一个颠覆传 ...
vue vuex使用_使用Vue和Vuex的记分板
vue vuex使用计分板 (Scoreboard) Scoreboard using Vue and Vuex. 使用Vue和Vuex的记分板. View demo 查看演示 Download S ...
详解 Vue Vuex 实践
2019独角兽企业重金招聘Python工程师标准>>> 随着应用复杂度的增加,我们需要考虑如何进行应用的状态管理,将业务逻辑与界面交互相剥离,详细讨论参考笔者的2016-我的前端之路 ...

Vue —— vuex

注意Vue.use(Vuex) 必须在创建store实例之前

Vue —— vuex相关推荐

最新文章

热门文章

Vue —— vuex

注意Vue.use(Vuex) 必须在 创建store实例之前

Vue —— vuex相关推荐

最新文章

热门文章

注意Vue.use(Vuex) 必须在创建store实例之前