vuex 介绍:官网解释,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
在 vue 项目中使用 vuex,步骤如下
1、项目安装 vuex
npm install vuex --save
或
cnpm install vuex --save
2、创建一个 store
在 src 文件夹下创建 store 文件夹及 store.js 文件
store.js 文件中代码如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
username: '默认值' //将username交给vuex管理,并赋予默认值
}
})
export default store
这里将username交给vuex管理,并赋予默认值
3、在main.js文件中进行配置
在main.js文件中引入 store.js,并进行添加
4、获取vuex中的 username
通过 this.$store.state.username 代码即可获取 vuex 中state维护的数据
示例代码如下
<template>
<div>
{{this.$store.state.username}}
<br/>
<input type="text" v-model="name" />
<button @click="changeName">修改vuex中的值</button>
</div>
</template>
<script>
export default {
data () {
return {
name: ''
}
},
methods: {
changeName(){
console.log(this.name)
}
}
}
</script>
如下图
运行效果如下图
成功获取到vuex中的数据
5、修改 vuex 中的数据
在 store.js 文件中添加下面代码
mutations: {
updateUsername(state, name){
state.username = name
}
}
其中方法名 updateUsername 自定义
在需要对vuex中的值进行修改的地方进行下列调用
this.$store.commit('updateUsername', '修改后的值')
测试代码如下
<template>
<div>
{{this.$store.state.username}}
<br/>
<input type="text" v-model="name" />
<button @click="changeName">修改vuex中的值</button>
</div>
</template>
<script>
export default {
data () {
return {
name: ''
}
},
methods: {
changeName(){
console.log(this.name)
this.$store.commit('updateUsername', this.name)
}
}
}
</script>
运行效果
修改成功