一、概览
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组件：**
<template>
<p>{{num}}</p>
<span>{{filterNewNum}}</span>
<input type="button" value="+" @click="addHandle" />
</template>
<script>
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 //参数
})
}
}
</script>
//上面是同步操作数据，使用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组件
<template>
<p>{{count}}</p>
<span>{{filterNum}}</span>
<input type="button" value="+" @click="add" />
<input type="button" value="-" @click="reduce({n:11})"/>
</template>
<script>
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'
})
}
}
</script>
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:'<App/>',
components:{
App
}
})
©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任