首先在你的项目中安装vuex
使用:
npm install vuex --save
然后在你的src文件夹下新建store文件夹,在里面新建一个index.js文件,然后在里面添加如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
然后在main.js当中引入在index.js文件当中创建的store对象,并在Vue实例中添加:
import store from './store'//引入store
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
然后就可以来写我们的vuex中的数据了,我们需要保存的数据就写在store/index.js中的state里,可以在其他页面通过 this.$store.state来获取我们定义的数据,接下来我先模拟一些数据;
//index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
//需要保存的数据写在这里
isLogin: false,
yhid:""
},
getters: {
//Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,
//且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,
//Getters 可以用于监听、state中的值的变化,返回计算后的结果
isLogin: state => state.isLogin,
yhid: state => state.yhid,
},
mutations: {
//相当于methods,在这里面定义函数;
userStatus(state, flag) {
state.isLogin = flag
},
yhid(state,aa){
state.yhid = aa
}
},
// 应用mutations,在actions中提交从页面传过来的mutation再去修改状态值
actions: {
userLogin({commit}, flag) {
commit("userStatus", flag)
},
yh({commit},aa){
commit("yhid",aa)
}
}
})
export default store
这里先不用管能不能看懂,你只要知道state里面的数据就是你要保存在全局里面的就行了。下面在其他页面获取一下state里面的数据。
<template>
<div class="hello">
<div>{{msg}}</div>
//输出state里面的数据
<div>{{$store.state.isLogin}}</div>
<div>yhid:{{$store.state.yhid}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
输出后页面如下,可以看到输出结果和state里面的状态一样。
既然可以输出了,下面我们做的就是怎么在普通页面来设置和修改state里面的数据了。
<template>
<div class="hello">
<div>{{msg}}</div>
<button @click="userLogin">点击改变userLogin:{{$store.state.isLogin}}</button>
<button @click="yh">点击改变yhid:{{$store.state.yhid}}</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
userLogin(){
this.$store.dispatch("userLogin",true)
},
yh(){
this.$store.dispatch("yh",77)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
点击按钮后效果如图所示:
这样就完成了。
解释一下store里面的其他内容的作用
dispatch:操作行为触发方法,是唯一能执行action的方法。通过他在普通页面调用store里面的action里面的方法。
actions:操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行,包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装,以支持action的链式触发。
commit:状态改变提交操作方法。对mutation进行提交,是唯一能执行mutation的方法。
mutations:状态改变操作方法。是Vuex修改state的唯一推荐方法,其他修改方式在严格模式下将会报错。该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些hook暴露出来,以进行state的监控等。
state:页面状态管理容器对象。集中存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新。
getters:state对象读取方法。图中没有单独列出该模块,应该被包含在了render中,Vue Components通过该方法读取全局state对象。
明白了这些还有最后一步;
如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法,那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了;
<template>
<div class="hello">
<div>{{msg}}</div>
<button @click="userLogin('true')">点击改变userLogin:{{$store.state.isLogin}}</button>
<button @click="yh('22')">点击改变yhid:{{$store.state.yhid}}</button>
<h3>{{yhid}}</h3>
</div>
</template>
<script>
import {mapState,mapActions,mapGetters} from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:{
...mapState([
'yhid'
])
},
methods:{
// userLogin(){
// this.$store.dispatch("userLogin",true)
// },
// yh(){
// this.$store.dispatch("yh",77)
// },
...mapActions([
'userLogin',
'yh'
]),
}
}
</script>
<style scoped>
</style>
效果如下:
这就是全部的vuex的用法了。