Vuex的基本使用
介绍
vuex是一个状态管理工具，可以用于组件通信
安装vuex
npm install vuex --save
在src下创建一个目录store，store下创建一个文件index.js，其代码如下
import Vue from 'vue'
import Vuex from 'vuex'
//1.安装插件
Vue.use(Vuex)
//2.创建对象
const store = new Vuex.Store({
state:{},
mutations:{},
ations:{},
getters:{},
modules:{}
})
//3.导出store
export default store
之后，在main.js文件中，写上如下代码，我们就可以在别的组件里使用这个vuex了
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
store,
render: h => h(App)
})
- state 状态
- getters 向外暴露方法，用于访问state
- mutations 只有mutations修改state才是允许的做法
- actions 异步提交mutations，从而改变state的状态
- modules 模块
state的使用
在别的组件中，直接通过$store.state.name访问，如在Hello.vue组件中
<template>
<div id='Hello'>
{{ $store.state.name }}
</div>
</template>
因为state中的name经常会被改变，为了符合vue的响应式，我们一般将组件中用到state的值放到computed属性中。
computed: {
name(){
return this.$store.state.name
}
}
辅助函数mapState的使用
computed: {
...mapState(["name"]) //效果和下面的等价,映射state的name
/* name(){
return this.$store.state.name
} */
},
getters的使用
getters:{
getCount(state){
return state.count
}
}
在别的组件中，使用如下
<template>
<div id='hello'>
<h2>{{$store.getters.getCount}}</h2>
</div>
</template>
注意getCount虽然是个方法，但是当成属性去使用
这里有一个巧妙的用法。
我么想判断count是否比500大还是小，但是这个500由调用者输入，如下：
xxx.vue组件内容如下
<h2>{{ $store.getters.thanCounter(500) }}</h2>
getters:{
thanCounter(state){
return funtion(userIpt){
return state.counter>userIpt
}
}
}
getters中一般都会有state中的值，所以一般也写在computed属性中，来响应式的渲染数据。
computed: {
...mapGetters(['getCount']) //getterrs的辅助函数
/* getCount(){
return this.$store.getters.getCount;
} */
}
mutations的使用
在通过mutation更新数据的时候，有可能我们希望携带一些额外的参数，参数被称为是mutation的载荷（Payload）
const store = new Vuex.Store({
state:{
name:'hello world',
counter:1000
},
mutations:{
incrementCounter(state,payload){
state.counter+=payload
}
}
})
在xxx.vue中使用
<button @click='incrementCounter(5)'>加5</button>
methods:{
incrementCounter(count){
this.$store.commit('incrementCount',count)
}
}
辅助函数的使用
methods: {
...mapMutations(['incrementCounter']),
/* incrementCounter(num){
this.$store.commit('incrementCounter', num);
}, */
},
mutation的类型常量
我们在App.vue里用 this.$store.commit(‘incrementCount’,count) 又在 mutations里写incrementCount，可能在书写incrementCount可能写错。所以官方提供给我们一共类型常量的写法。如下
我们在store目录下创建一个文件叫mutations-types.js文件，内容如下
export const INCREMENTCOUNTER = 'incrementCounter'
然后在App,vue文件中
import {INCREMENTCOUNTER} from './store/mutations-types.js'
methods:{
incrementCounter(count){
this.$store.commit(INCREMENTCOUNTER,count)
}
}
然后在store/index.js文件中
import {INCREMENTCOUNTER} from './store/mutations-types.js'
mutaions:{
[INCREMENTCOUNTER](state){
state.counter++
}
}
这样mutation的名字统一在一个文件中，我们不容易写错，推荐使用这种形式
actions的使用
这里面写的一般都是些异步代码
是用来替代Mutation进行异步操作的
mutations:{
updateInfo(state,payload){
state.info.name = payload
}
}
actions:{
//context：上下文环境。即指的的store对象
aupdateInfo(context,payload){
setTimeout(()=>{
context.commit('updateInfo',payload)
},1000)
}
}
在别的组件使用如下
<buttion @click='updateInfo()'></buttton>
methods:{
updateInfo(){
this.$store.dispatch('aupdateInfo','我是payload')
}
}
辅助函数的使用
methods: {
...mapActions(['aupdateInfo'])
/* aupdateInfo(num){
this.$store.dispatch('aupdateInfo', num);
} */
},
models的使用
//将数据分为a模块和b模块
modules:{
a:{
namespaced:true, //命名空间，开启命名空间后，访问a模块下的任何东西，必须严格指明其路径，才能准确的访问到
state:{
name:'zhangsan'
},
mutations:{
updateName(state,payload){
state.name = payload
}
},
actions:{
aupdateName(context,payload){
setTimeout(() => {
context.commit('updateName','wangwu') //只会找此模块中的mutations
},1000)
}
},
getters:{
fullName(state){
return state.name + '11111'
},
fullName(state,getters){
return gettes.fullName + '22222'
},
fullName3(state,getters,rootState){
console.log(rootState.counter) //rootState这个参数是根的状态
},
},
modules:{} //可以进行嵌套
},
b:{
namespaced:true,
state:{},
mutations:{},
actions:{},
getters:{},
modules:{}
}
}
使用
<h2>{{$store.state.a.name}}</h2> <!-- zhangsan -->
<button @click='updateName'>修改a模块中的名字</button>
methods:{
/*updateName(){
this.$store.commit('a/updateName','lisi') //a模块中的updateName
}*/
...mapMutations({ //参数除了可以是数组，还可以是对象
'updateName':'a/updateName' //映射到a模块的mutation里的updateName函数
})
}