vuex 使用教程

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>

运行效果

修改成功