Vuex是什么?
Vuex是一个专为Vue.js应用程序开发的状态管理模式;它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。
怎么使用?
1.安装vuex
按照官网给出的步骤 官网地址
npm install vuex --save //安装vuex
2.Vuex 依赖 Promise 浏览器支持promise的此步骤可省略
注意:Vuex 依赖 Promise (opens new window)。如果你支持的浏览器并没有实现 Promise (比如 IE),那么你可以使用一个 polyfill 的库,例如 es6-promise (opens new window)。
你可以通过 CDN 将其引入:
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js">
</script>
然后 window.Promise 会自动可用。如果你喜欢使用诸如 npm 或 Yarn 等包管理器,可以按照下列方式执行安装:
npm install es6-promise --save # npm
yarn add es6-promise # Yarn
或者更进一步,将下列代码添加到你使用 Vuex 之前的一个地方:import 'es6-promise/auto'
3.在项目引用
找到项目中的main.js文件,将内容引入
import store from './store'
.use(store)
4.使用方法
首先,在项目中找到store文件夹,如果没有就自己建一个文件夹,在文件夹内再新建一个js文件。
import { createStore } from 'vuex'
export default createStore({
state: { //数据存放的位置
data:''
},
mutations: {//在mutations写方法更改state中的值
data(state,data){
state.data=data
}
},
actions: {//通过actions触发mutations的方法
dataone(context,data){
context.commit('data',data);//带引号的data是mutation里的,第二个data,是页面上
//传过来的参数
}
},
modules: {
}
})然后,将要保存的数据从页面传过来
这是页面:
import {useStore} from 'vuex'
export default{
setup(){
let A =124
const store=useStore();
store.dispatch('dataone',A)
//括号内第一个参数为actions中的方法名,方法名不能与mutations中重复
//第二个为需要存储改变的值的变量
}
}
描述使用它实现登录功能的流程?
1、首先说说怎么获取input框的值
vue中提供了一个ref属性,这里需要在html代码中用ref属性来绑定这个input框,再通过js代码来获取input的值:
HTML代码:
1 |
|
js代码: