Vuex教程
一、概览
1、Vuex是什么
网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了拉萨免费建站欢迎大家使用！
- 专为Vue.js应用程序开发的状态管理模式（状态即数据，即数据管理）
- 采用集中式存储管理应用的所有组件的状态
- 以相应的规则保证状态以一种可预测的方式发生变化
2、状态 - 组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 )
- 应用级别状态：多个组件共用的状态（将这个状态放入vuex中进行管理）
3、什么情况下使用Vuex - 多个视图（组件）依赖同一状态
- 来自不同视图（组件）的行为需要变更同一状态
二、Vuex核心概念
1、store：类似容器，包含应用的大部分状态
- 一个页面只能有一个容器
- 状态存储是响应式的
- 不能直接改变store中的状态，唯一途径显示地提交mutations
- 在actions里面，也不能直接更改state里面的状态值，必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值；如果要再次请求异步，那么就是dispatch一个actions
2、State：包含所有应用级别状态的对象
3、Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed
4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions
5、Actions：包含异步操作、提交mutations改变状态
6、Modules：将store分割成不同的模块
三、使用Vuex
1、安装Vuex模块
npm install vuex --save
2、作为插件使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3、定义容器
let store = new Vuex.Store({
state:{
count:100
},
mutations:{ //对象，里面是各种更改state状态值的函数，同步立即更改状态
add( state,payload ){ //参数state就是上面的state，payload是要传递的值
state.count+=payload.n;
}
},
actions:{ //异步更改状态，可以是ajax请求成功之后改变状态，这里用定时器模拟，1秒钟之后提交mutations改变状态
//异步的更改状态是直接在index.js里面的actions里面定义action然后commit的(附带参数)，而不是在组件内提交，注意区别，异步是在组件内dispatch这个actions(actions里面已经包含了mutations)，同步是在组件内commit这个mutations(附带参数)
//异步也可以在index.js里面直接dispatch这个actions(附带参数)，在第一个ajax里面接着请求第二个ajax
addAction( context ){ //ajax1
setTimeout(function(){
context.commit('add',{n:200}); //这里用的mutations还是上面定义的add
context.dispatch('textAction',{test:'测试'}) //触发ajax2
},1000)
}
textAction( context,obj ){ //ajax2
console.log(obj)
}
//利用es6解构赋值改写上面的代码，因为context对象下面有commit和dispatch方法
addAction( {commit,dispatch} ){
setTimeout(function(){
commit('add',{n:200}); //直接可以获取到commit方法，不用是context.commit
dispatch('textAction',{test:'测试'})
},1000)
}
textAction( context,obj ){ //ajax2
console.log(obj)
}
},//异步更改状态,一段时间之后再改变状态，只要是异步的改变都写在actions里面
getters:{ //类似计算属性，对状态做进一步的处理
filterCount(state){
return state.count>=120?120:state.count++;
}
}
})
export default store
4、注入根实例
import store from './store'
new Vue({
store
})5、在state里面定义的是状态，如果在组件内部要使用这个状态，那么一般在组件内部通过计算属性来得到它
{{count}}
{{count2}}
computed:{
count(){
return this.$store.state.count
},
count2(){
return this.$store.getters.filterCount //被getters进一步处理过的状态
}
},
methods:{
addHandle(){ //要动态的改变状态，就需要显示的提交一个mutations —> add
//同步，写法一
this.$store.commit('add',{n:10})
//同步，写法二
this.$store.commit({
type:'add',
n:5
})
//异步，写法
this.$store.dispatch('addAction')
}
}6、context是一个对象，不是state实例
7、使用辅助函数
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
//这是改写state和getters
computed:{
num(){
return this.$store.state.count
},
num2(){
return this.$store.getters.filterNum
}
}
computed:mapState({
num:state => state.count
num:'count'
num(state){
return state.count+100
}
count:'count' //此时渲染的是count，不是num
})
computed:{
abc(){
return 123
},
...mapGetters({
num2:'filterCount' //如果key值（即要渲染到页面的变量值）和vuex里面定义的是一样的，那么就可以是下面那种写法
}),
...mapState(['count']) //count:count count是要渲染到页面 state:{count:100}，state里面定义的状态名也是count
}
//这是改写actions和mutations
methods:{
add(){ //异步actions
this.$store.dispatch('addAction')
}
},
reduce(){ //普通mutations，参数可以直接跟在对象里
this.$store.commit({
type:'reduceMutation',
n:10
})
}
methods:{
...mapActions({
add:'addAction' //add是页面点击函数，addAction是vuex里面定义的action
})
...mapMutations({ //这种方法要传参，只能是在调用的时候传进去
reduce:'reduceMutation'
})
}
参数在这里传，和普通写法不同
四、案例
**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}}
//上面是同步操作数据，使用mutations，如果要异步操作数据，就用到Actions，注意，不管是同步还是异步操作，改变数据前都得先提交mutations
//向后端发送ajax请求就放在Actions里面。在methods里面创建方法，通过axios获取数据，然后更新到store里面定义的变量，这一系列操作都在index.js文件里面完成
如果要对store里面的数值进行逻辑判断（数据过滤、数据的加减乘除），那么就用到getters，用法类似于计算属性computed，getters可以看做是Vuex的计算属性
在Store仓库里，state就是用来存放数据，在Vue里面若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。因为getters是对数据进行逻辑运算，而不是新添加的方法或功能，仅仅是是数据的逻辑运算，所以要始终返回一个新值，可以先在getters下面的方法里面定义一个新值变量，经过计算，然后return出这个新变量
- getters比较死板，如果你的百度钱包只有在金额为100才能提现，那么你在写提现页面，它是早已固定好的，而Mutation不一样，当你点击百度钱包提现，你哪怕是一元，它只要你点击了便可以提现，而且getters它是不需要什么点击，它就存在，只要你写了，这是什么意思，就是说假设你百度钱包为0，你存在了getter它就有100元，而你如果写许多百度经验，百度再次发红包0.5元时它就是100+0.5+100
五、Vuex辅助函数
使用这些辅助函数，首先需要引入vuex，这些都是vuex下面的方法，使用解构赋值
import { mapState } from 'vuex'
mapState
mapGetters
mapMutations
mapActions
改写上面的代码：
Increment.vue组件
{{count}}
{{filterNum}}
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'
import axios from 'axios'
Vue.use(Vuex)
let store = new Vuex.Store({
state:{
shopCarData:[] //购物车的数据默认数据格式是数组，使用Vuex对这个数组进行操作
},
mutations:{
addShopCarData(state,data){
//do something
}
},
getters:{
}
})
export default store4、main.js代码
import store from './store'
new Vue({
el:'#app',
router,
store,
template:'七、vuex使用心得1、在state里面定义全局共用的状态数据，state是一个对象，里面定义键值对，在组件页面，获取state状态值，通过computed计算属性来获取
2、即时修改state状态值，通过提交mutations来进行，mutations是一个对象，里面定义各种修改state状态值的方法，方法接收state和payload两个参数
3、异步修改state状态值，通过actions来获取数据，然后也要通过提交mutations来修改state里面定义的状态值
用的较多的是通过axios来获取远程数据，然后在then方法里面commit一个mutations来修改state里面的原始状态值，mutations要先定义
在created(){}里面通过this.$store.dispatch('fetchDataAction')来执行这个actions，
定义@click方法来即时提交mutations，
br/>1、在state里面定义全局共用的状态数据，state是一个对象，里面定义键值对，在组件页面，获取state状态值，通过computed计算属性来获取
2、即时修改state状态值，通过提交mutations来进行，mutations是一个对象，里面定义各种修改state状态值的方法，方法接收state和payload两个参数
3、异步修改state状态值，通过actions来获取数据，然后也要通过提交mutations来修改state里面定义的状态值
用的较多的是通过axios来获取远程数据，然后在then方法里面commit一个mutations来修改state里面的原始状态值，mutations要先定义
在created(){}里面通过this.$store.dispatch('fetchDataAction')来执行这个actions，
定义@click方法来即时提交mutations，
分享名称：Vuex教程
本文地址：http://6mz.cn/article/pjjgih.html