Vue Vuex用法 vue

1.Vuex是做什么的
Vuex是一个专门为Vue.js应用程序开发的状态管理模式
采用集中式存储管理应用的所有组件状态
就是一个能够集中管理组件中数据并完成响应式操作的轮子
【Vue Vuex用法】2.Vuex的基本用法

//vuex新文件 index.js import Vue from 'vue' import Vuex from 'vuex' //安装插件 Vue.use(Vuex) const store = new Vue.store({ state:{ //保存状态（值）的 counter:1000//后面要用的值 }, mutations:{ //操作值的方法 increment(satate){ state.counter++ }, decrement(satate){ state.counter-- }, getters:{ powerCounter(state){ return state.counter * state.counter }, addOne(state,getters){//可以把getters传进来第二个不管叫啥都是getters return getters.powerCounter+1 }, addNum(){//别人传入一个值我加上 //返回一个操作值的方法后再在标签上调用 return num =>{//给标签返回一个方法 return state.counter + num } } } } }) export defaultstore //导出store独享//在main.js中挂载 import Vuefrom 'vue' import App from './App' import store from './store'Vue.config.productionTip = falsenewVue({ el:'#app', store, render:h => h(App) })//在页面使用 > import HelloVuex from './components/HelloVuex' export default{ name:'#app', methods:{ addition(){ this.$store.commit('increment') //commit 提交后面传入的是在Vuex配置中的mutations里面的方法名 }, substraction(){ this.$store.commit('decrement') } } }

3.插件 vuex-devtools
谷歌插件商店下一个能监控到Vuex每一步值的改变
4.Vuex 中的mutations的状态更新(传参后改值)

最好不要在mutation中做异步操作
vuex的store状态（state）的唯一更新方式是提交
mutation可以看成是两部分
{
1.字符串的事件类型（方法名）
2.回调函数第一个参数是state
}
给mutations传递参数（载荷）

//vuex新文件 index.js const store = new Vue.store({ state:{ counter:1000//后面要用的值 }, mutations:{ addCount(satate,num){ //通过普通封装传参的取值方法传的是值 state.counter += num //num是传递进来的参数 }, addCount(satate,payload){ //通过特殊封装传参的取值方法传的是对象 state.counter += payload.num//num是传递进来的参数payload是个参数名叫啥都行 } } })//在页面使用 > export default{ name:'#app', methods:{ addCount(num){ this.$store.commit('addCount',num)//后面是给mutations传的值这是一种普通的提交封装 this.$store.commit({ //特殊的提交封装这样提交的是个对象 type:'addCount', num }) }} }

5.Mutation同步函数（actions）

//vuex新文件 index.js const store = new Vue.store({ state:{ counter:1000 }, mutations:{ updateInfo(){ state.counter++ } }, actions:{ //写异步方法 aUpdateInfo(context,payloud){//context 上下文context相当于store payloud是传的参 return new Promise((resolve,reject) =>{ setTimeout((context) => { context.commit('updateInfo') //通过store调用mutations里的方法修改值mutations用commit提交 resolve("34567890-34567890") },1000) }) }) } })//在页面使用 > export default{ name:'#app', methods:{ addCount(){ this.$store.dispatch('aUpdateInfo','payloud').then(res =>{ console.log(res)//res是上面promise传的值可以不用promise })//actions 用dispatch提交把payloud字符串传递给actions (不是非得传字符串) } } }

6.关于modules

//vuex新文件 index.js const moduleA={ state:{ num:666 }, mutations:{ updateNum(){ state.num='hahaha' } }, getters:{ afun(state){ return state.name+"1234654" }, bfun(state,getter){ return getters.afun+"00000" }, cfun(state,getter,rootState){ //rootState拿到的是下面的没有被分出来的state return getters.bfun+rootState.counter } }, actions:{ aUpdateInfo(context){ //这里的context不是store 是自己的模块 } } } const store = new Vue.store({ state:{ counter:1000 }, mutations:{ updateInfo(){ state.counter++ } }, modules:{ a:moduleA//a会被放到state里 } })//在页面使用 > export default{ name:'#app', methods:{ upDateName(){ this.$store.commit('updateNum') } } }