Vuex
vuex是一个专门为vue.js设计的集中式状态管理架构,其中状态可以理解为在data中的属性需要共享给其他vue组件使用的部分(即是将共用属性进行共享)。
例如当用户登陆成功,得到了用户名和密码,若将用户名和密码等属性做成状态,那么在其他页面可以很方便的得到用户名和密码(等属性),不用在通过服务器进行查找。
在使用vuex时需要安装相关的依赖包,利用npm包管理工具,安装vuex,采用以下代码。
npm install vuex --save
! ! !注意这里需要加上save,因为这个包是在生产环境中使用的。
Vuex引入步骤
1.安装vuex成功后,需要在src/
目录下新建vuex
文件夹
2.在src/vuex
目录下新建store.js
文件
3.在src/vuex/store.js
文件中分别引入vue
和vuex
import Vue from 'vue';
import Vuex from 'vuex';
使用vuex,引入之后用Vue.use进行引用
Vue.use(Vuex);
通过以上三步操作,vuex就算是引入成功了。
Vuex简单的应用
例子:实现点击按钮进行数字加一或是减一的功能。
首先,先定义结果count
属性,将该属性做成状态
1.在src/vuex/store.js
文件中定义一个常量对象state
const state={
count:1
}
2.再将该常量对象进行暴露,src/vuex/store.js
文件中,用export default 封装代码,让外部可以引用。
export default new Vuex.Store({
state
})
3.在src/components/
目录下新建count.vue模板,在模板中简单的输出count
这个状态(属性)。
<template>
<div>
<h3>结果是:{{$store.state.count}}</h3>
</div>
</template>
<script>
import store from '@/vuex/store';
export default{
data(){
return{
msg:'结果是:'
}
},
store
}
</script>
<style>
</style>
- 在新建的模板中
(count.vue)
中引入store.js
文件
import store from '@/vuex/store';
- 将在
store.js
文件中定义的常量对象state
进行引入
<script>
export default{
data(){
return{
msg:'结果是:'
}
},
store
}
</script>
- 获取
state
对象中的属性可以通过调用$store.state.属性
代码
<h3>{{$store.state.count}}</h3>
附加:若想测试此代码,还需要在路由配置文件(src/router/index.js
)进行配置
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path:'/count',
component:Count
}
]
})
运行的结果:
4.在src/components/count.vue
文件中增加两个按钮,点击按钮进行加一
或减一
的操作。
- 在
count.vue
文件中:
<template>
<div>
<h3>结果是:{{$store.state.count}}</h3>
<p>
<button @click="$store.commit('add')">加1</button>
<button @click="$store.commit('reduce')">减1</button>
</p>
</div>
</template>
<script>
import store from '@/vuex/store';
export default{
data(){
return{
msg:'结果是:'
}
},
store
}
</script>
- 在
store.js
文件中中加入两个改变state的方法,这时用到的是mutations
(改变)常量。
const mutations={
add(state){
state.count++;
console.log("运行了add方法")
},
reduce(state){
state.count--;
console.log("运行了reduce方法")
}
}
这里用到了add和reduce方法,都是将state
引入进行操作。写好改变state的方法之后,也需要将其进行暴露。
export default new Vuex.Store({
state,mutations
})
- 在store.js文件中写好相关的方法之后,调用mutations中的方法可以通过
$store.commit('方法名')
的形式进行调用。
<p>
<button @click="$store.commit('add')">加1</button>
<button @click="$store.commit('reduce')">减1</button>
</p>
加一
的运行结果:
减一
的运行效果: