vue整合vuex | 易学教程

什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。简单来说，用于维护组件之间的数据。(官网:https://vuex.vuejs.org/zh/guide/state.html)

2.vue如何整合vuex

步骤一：在使用vue create 创建项目时，需要选择vuex组件(因为个人创建项目时已经保存了模板所以已经不用去勾选了)。

步骤二：将创建src/store/index.js文件，用户存放状态（数据）

3.vuex组成

vue脚手架自动创建内容

exportdefaultnewVuex.Store({
state:{
},
mutations:{
},
actions:{
},
modules:{
}
})

state，vuex状态，也就是数据。（不允许直接修改，只能读）
mutations，修改，用于修改数据。
actions，用于操作mutations，运行发送ajax。

3.1. state使用
1)如何声明变量，用于存储数据

importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
state:{//状态，用于存放数据，类似data区域
count:0
},
mutations:{
},
actions:{
},
modules:{
}
})

2）如何在其他组件中，使用vuex的数据
this.$store表示操作vuex
this.$store.state表示操作vuex的state区域

<script>
exportdefault{
created(){
//获得vuex中的数据
console.info(this.$store.state.count)
},
}
</script>

3.2. mutations使用

1）如何在mutations定义函数，修改state的值

importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
state:{//状态，用于存放数据，类似data区域
count:0
},
mutations:{
//声明updateCount函数，修改count的值
updateCount(state,value){
state.count=value
}
},
actions:{
},
modules:{
}
})

2）如何在其他组件中，执行mutations定义的函数

<script>
exportdefault{
created(){
//获得vuex中的数据
console.info(this.$store.state.count)
//修改vuex中的数据，通过mutations
this.$store.commit('updateCount',100)
//获得vuex中的数据
console.info(this.$store.state.count)
},
}

4. vuex简化操作

vuex提供mapState和mapMutations对vuex操作进行简化

<template>
<div>
结果：{{count}},<inputtype="button"@click="updateCount(10)"value="更改">
</div>
</template>
<script>
import{mapState,mapMutations}from'vuex'
/*
mapState内部定义的函数，用于从vue的state区域获得数据
mapState(数组)，数组表示需要获得哪些数据，将返回一个对象
43
电话：0527-809655550527-80961111网址：www.czxy.com
{数组元素:值，数值元素：值}
实际使用中，将结果存放到计算属性处（computed），需要将对象...解构后存放
*/
exportdefault{
computed:{
/*
count(){
returnthis.$store.state.count
}
*/
...mapState(['count'])
},
methods:{
/*
updateCount(value){
this.$store.commit('updateCount',value)
}
*/
...mapMutations(['updateCount'])
},
}
</script>
<style>
</style>

5. 案例:用户登录

步骤一：检查后端，登录成功后，将用户信息返回

步骤二：修改store/index.js添加user变量，并提供updateUser进行数据修改

importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
state:{
user:null//存储用户登录的信息
},
mutations:{//用于修改用户数据
updateUser(state,value){
state.user=value
}
},
actions:{
},
modules:{
}
})

步骤三：前端用户登录成功，将数据保持vuex中（使用mutations修改数据）

<template>
<div>
<h1>用户登录表单</h1>

<!--table>tr*3>td*2-->
<tableborder="1">
<tr>
<td>用户名</td>
<td><inputtype="text"v-model="user.username"></td>
</tr>
<tr>
<td>密码</td>
<td><inputtype="password"v-model="user.password"></td>
</tr>
<tr>
<tdcolspan="2">
<inputtype="button"@click="loginFn"value="用户登录">
</td>
</tr>
</table>
<spanstyle="color:red">{{msgError}}</span>
</div>
</template>
<script>
//从api.js解构login
import{login}from'../api'
//#1从vuex获得映射函数
import{mapMutations}from'vuex'
exportdefault{
data(){
return{
user:{
'username':'',
'password':''
},
msgError:''
}
},
methods:{
asyncloginFn(){
//登录操作
let{data}=awaitlogin(this.user)
//判断
if(data.code==1){
debugger
//#3登录成功，调用updateUser设置用户数据到vuex中
this.updateUser(data.other.user)
47
电话：0527-809655550527-80961111网址：www.czxy.com
//成功
this.$router.push('/home')
}else{
this.msgError=data.message
}
},
//#2解构对应操作函数
...mapMutations(['updateUser'])
},
}
</script>
<style>
</style>

步骤四：修改App.vue，使用vuex简化版（映射方式）获取vuex中的user数据

<template>
<divid="app">
<!--#3有数据显示-->
<divv-if="user!=null">
欢迎{{user.username}}登录
</div>
<divv-else>
<router-linkto="/register">用户注册</router-link>|
<router-linkto="/login">用户登录</router-link>
</div>
<!--路由视图-->
<router-view/>
</div>
</template>
<script>
//#1导入vuex映射
import{mapState}from'vuex'
exportdefault{
//#2解构需要使用变量
computed:{
...mapState(['user'])
},
}
</script>
<style>
</style>

6. vuex多用户登录，会不会数据冲突？
•不会冲突
•vuex可以理解成全局变量，每一个浏览器各自的变量。
•不同的用户不会出现共享。
•vuex在组件之间共享数据。
•使用vuex常见问题，浏览器刷新时，数据丢失了。
–内部是一个变量，当前页面如果没有对变量重新赋值，刷新后数据应该丢失的。

感谢各位兄弟姐妹阅读!!!

来源：oschina

链接：https://my.oschina.net/u/4234912/blog/3214161

标签

vuex

Vue.js