vuex ajax dev,Vuex教程

一、概览

1、Vuex是什么

专为Vue.js应用程序开发的状态管理模式(状态即数据，即数据管理)

采用集中式存储管理应用的所有组件的状态

以相应的规则保证状态以一种可预测的方式发生变化

2、状态

组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 )

应用级别状态：多个组件共用的状态

3、什么情况下使用Vuex

多个视图依赖同一状态

来自不同视图的行为需要变更同一状态

二、使用Vuex

1、安装Vuex模块

npm install vuex --save-dev

2、作为插件使用

Vuex.use(Vuex)

3、定义一个容器

new Vuex.Store()

4、注入根实例

new vue({

store

})

具体步骤：

1、在src目录下新建store文件夹，里面创建index.js文件

在index.js文件：

import Vue from 'vue'

import Vuex from 'vuex'

Vuex.use(Vuex)

三、Vuex核心概念

1、store：类似容器，包含应用的大部分状态

一个页面只能有一个容器

状态存储是响应式的

不能直接改变store中的状态，唯一途径显示地提交mutations

2、State：包含所有应用级别状态的对象

3、Getters：在组件内部获取store中状态的函数

4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions

5、Actions：包含异步操作、提交mutations改变状态

6、Modules：将store分割成不同的模块

四、案例

**index.js**

let store = new Vuex.Store({

state:{  //对象，应用所需要的状态数据都放在这里面

count:100

},

mutations:{  //对象，显示的同步提交mutations

addIncrement(state,payload){  //这里是自定义addIncrement事件

state.count+ = payload.n

}

},

actions:{

addAction( context ){  //这里新加自定义事件addAction

setTimeout( ()=>{  /模拟异步操作

//改变状态，提交mutations，仍然是上面mutations里面定义的事件addIncrement

context.commit('addIncrement',{n:15})

context.dispatch('textAction',{test:'测试'})  //这里执行该异步操作

},1000 )

},

textAction(context,obj){  //定义第二个异步操作

console.log(obj)  //{test:'测试'}

},

getListAction( context ){  //这里定义了异步接口action，在子组件created里面调用

axios.get('url')

.then( (data)=>{

console.log(data);  //得到了接口数据

} )

}

},

getters:{  //对store里面的数值进行逻辑操作

filterState(state){

return state.count>=120?120:state.count

}

}

})

export default store

**increment组件：**

{{num}}

{{filterNewNum}}

computed:{

num(){

rerurn this.$store.state.count

},

filterNewNum(){  //这里面接收过滤后的，仓库里面的数据

return this.$store.getters.filterState //注意是return，不要漏了

}

},

methods:{

addHandle(){  //改变状态，提交mutations

this.$store.commit('addIncrement',{  //这里是commit addIncrement

n:5                //参数

});

}

//这里是异步触发一个action，注意和上面同步的不同之处

this.$store.dispatch.commit('addAction') //这里是dispatch addAction

},

created(){

this.$store.dispatch('getListAction');  //dispatch

}

也可以这样写：

methods:{

addHandle(){

this.$store.commit({

type:'addIncrement',  //改变的状态类型

n:5                             //参数

})

}

}

//上面是同步操作数据，使用mutations，如果要异步操作数据，就用到Actions，注意，不管是同步还是异步操作，改变数据前都得先提交mutations

//向后端发送ajax请求就放在Actions里面。在methods里面创建方法，通过axios获取数据，然后更新到store里面定义的变量，这一系列操作都在index.js文件里面完成

如果要对store里面的数值进行逻辑判断，那么就用到getters，用法类似于计算属性computed

2、在main.js下面

import store from './store'

new vue({

router,

store

})

五、Vuex辅助函数

mapState

mapGetters

mapMutations

mapActions

改写上面的代码：

Increment.vue组件

{{count}}

{{filterNum}}

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

export default {

data(){

},

computed:{

abc(){

return 123  //普通的计算属性

},

...mapState(['count'])  //这里的count就是store里面定义的仓库里面的count

...mapGeters(['filterNum'])  //从getters里面取值(经过逻辑处理的值)

},

methods:{

/*reduce(){  //同步触发action

this.$store.commit('reduceAction',{n:5})  //同步每次减5

}*/

...mapMutations({  //改写mutations，要传参，参数在模板里面添加reduce({n:11})

reduce:'reduceAction'

})

/*add(){  //异步触发actions

this.$store.dispatch('addAction')

}*/

...mapActions({  //改写actions

add:'addAction'

})

}

}

index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({

state:{

count:100

},

mutations:{

addHandle(state,payload){  //payload是参数

state.count+=payload.n;

},

reduceAction(state,payload){

state.count-=payload.n

}

},

actions:{

addAction(context){

setTimeout(()=>{

context.commit('addHandle',{n:15})  //异步每次加15

},1000)

}

},

getters:{

filterNum(state){

return state.count>=102?102:state.count

}

}

})

export default store

六、在vue-cli里面使用Vuex

1、npm install vuex --save

2、在src目录下面新建store文件夹，里面新建index.js

3、store/index.js代码：

import Vue from 'Vue'

import Vuex from 'Vuex'

Vue.use(Vuex)

let store = new Vuex.Store({

state:{

shopCarData:[]  //购物车的数据默认数据格式是数组，使用Vuex对这个数组进行操作

},

mutations:{

addShopCarData(state,data){

//do something

}

},

getters:{

}

})

export default store

4、main.js代码

import store from './store'

new Vue({

el:'#app',

router,

store,

template:'',

components:{

App

}

})

©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任