首先在你的项目中安装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的用法了。
