vuex的介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
解决的问题
vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。
图示
在这里插入图片描述
总结
- 修改state状态必须通过
mutations -
mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行 - 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
- state的状态即共享数据可以在组件中引用
- 组件中可以调用action
使用部分
1. 安装vuex
第一步：npm i vuex --save => 安装到运行时依赖 (项目上线之后依然使用的依赖 )
npm i vuex --save
或
npm i vuex -S
2.引入vuex
在vue脚手架的src文件夹下的main.js文件中
src=>main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex' //引入
Vue.config.productionTip = false
Vue.use(Vuex) //完成Vuex的全局注册,调用了Vuex里面的一个install方法
//实例化Vuex的store
const store=new Vuex.Store() //实例化Vuex的store 实际上所有的 state actions mutations 存于store
new Vue({
router,
render: h => h(App),
store //es6 属性名和变量名同名时可以缩写
}).$mount('#app')
vuex的state使用
1.存放数据
src=>main.js
...
//实例化Vuex的store
const store=new Vuex.Store({
//存放数据的位置
state:{
//定义一个数据
count:1
},
mutations:{},//同步修改
actions:{} //异步修改
})
...
2.获取数据的三种方式
2.1原始方式获取
<template>
<div class="home">
<div>原始方式:{{$store.state.count}}</div>
</div>
</template>
2.2计算属性获取
<div class="home">
<div>计算属性:{{count}}</div>
</div>
...
export default {
computed: {
count () {
return this.$store.state.count
}
}
}
2.3辅助属性获取
<div class="home">
<div>辅助属性:{{ count }}</div>
<div>辅助属性:{{ count1 }}</div>
</div>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['count', 'count1'])
}
}
mutations的使用
src=>main.js
定义一个方法
// 实例化Vuex的store
...
const store = new Vuex.Store({
state: {
count: 1,
count1: 2
},
//定义一个方法
mutations: {
addCount (state) {
state.count += 1
}
},
actions: {}
})
...
原始方法
compontnts => 子组件文件名
<template>
<div>
<button @click="addCount">+1</button>
</div>
</template>
<script>
export default {
methods: {
addCount () {
this.$store.commit('addCount')
}
}
}
</script>
带参数的方式
compontnts => 子组件文件名
methods: {
addCount () {
this.$store.commit('addCount', 10)
}
}
src=>main.js
...
mutations: {
//payload接收到的参数
addCount (state,payload) {
state.count += payload
}
},
...
辅助函数mapMutations方法
compontnts => 子组件文件名
<template>
<div>
<button @click="addCount(1)">+1</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
//方法名
...mapMutations(['addCount'])
}
}
src=>main.js
mutations: {
addCount (state,payload) {
state.count += payload
}
},
actions的使用
src=>main.js
actions: {
getAsyncCount(context) {
//异步调用
setTimeout(function () {
context.commit('addCount', 123)
}, 1000)
}
}
原始方法
compontnts => 子组件文件名
<template>
<div>
<button @click="addCount(1)">+1</button>
<button @click="test">异步调用</button>
</div>
</template>
<script>
import { mapMutations, mapActions } from 'vuex'
export default {
methods: {
...mapMutations(['addCount']),
...mapActions(['getAsyncCount']),
test () {
this.$store.dispatch('getAsyncCount', 111)
}
}
}
</script>
辅助函数mapActions
compontnts => 子组件文件名
<button @click="getAsyncCount(1)">辅助函数 Action调用</button>
<script>
import { mapMutations, mapActions } from 'vuex'
export default {
methods: {
...mapMutations(['addCount']),
...mapActions(['getAsyncCount'])
}
}
</script>
src=>main.js
actions: {
getAsyncCount (context, params) { //params 传参
setTimeout(function () {
context.commit('addCount', params) //params 传参
}, 1000)
}
}
getters 过滤属性的使用
src=>main.js
const store = new Vuex.Store({
state: {
count: 2,
count1: 3,
list:[1,2,3,4,5,6,7,8,9,10]
},
...
getters:{
//筛选
filterList(state){
return state.list.filter(item=>item>5)
}
}
Home.vue
<div>筛选:{{$store.getters.filterList}}</div>
import ChildA from '@/components/Child-a.vue'
import { mapState,mapGetters } from 'vuex'
export default {
components: {
ChildA
},
computed: {
...mapState(['count', 'count1']),
...mapGetters(['filterList'])
}
}
modules模块
图示
在这里插入图片描述
src=>main.js
modules:{
user:{
state:{
token:12345
}
},
setting:{
state:{
name:'Vuex实例'
}
}
}
获取
此时获取子模块的状态,需要通过 $store.state.模块名称.属性名
{{$store.state.user.token}}
{{$store.state.setting.name}}
导出使用
getters:{
filterList(state){
return state.list.filter(item=>item>5)
},
token:state=>state.user.token, //用一个总的getters向外暴露子模块的属性
name:state=>state.setting.name //用一个总的getters向外暴露子模块的属性
},
使用界面
接收
import {mapGetters} from 'vuex'
export default {
computed:{
...mapGetters(['token','name'])
}
}
</script>
使用
{{token}}
{{name}}
命名空间
src=>main.js
modules: {
user: {
state: {
token: 12345
},
mutations: {
namespaced:true //加上此句便不会全局调用
updateToken(state) {
state.token = 678910
}
}
},
}
引入
<script>
import {mapGetters, mapMutations} from 'vuex' //引入
export default {
computed:{
...mapGetters(['token','name'])
},
methods:{
...mapMutations(['updateToken']) //引入
}
}
</script>
调用封闭空间的action
src=>main.js
modules: {
user: {
namespaced:true,
state: {
token: 12345
},
mutations: {
updateToken(state) {
state.token = 678910
}
}
},
调用的方式
<button @click="test">调用封闭空间的action</button>
methods: {
...mapMutations(['user/updateToken']),
test() {
this['user/updateToken']() //调用模块的方法
}
}
辅助函数调用
<button @click="updateToken">辅助函数调用封闭空间</button> !!!
import { mapGetters, createNamespacedHelpers } from 'vuex' !!!
const {mapMutations}=createNamespacedHelpers('user') !!!
export default {
computed: {
...mapGetters(['token', 'name'])
},
methods: {
...mapMutations(['updateToken']), !!!
test() {
this['user/updateToken']() //调用模块的方法
}
}
}
网友评论