简单入手 vuex--状态管理
如果你之前使用过vue.js，你一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，那么接下来我们就来学习一下vuex是如何修改状态值的：
安装: npm install vuex --save
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。引入:import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //将vuex注册给vue
安装 Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：
基础:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}})
export defert store //导出store
new Vue({
el: '#app',
store, //在vue实例全局引入store对象
router,
render: h => h(App)
})
关于 States:
vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；
state: {
count: 0
},
在组建中获取值使用: 直接获得count共享数据：{{ $store.state.count }}
关于 Getter:
Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果
getters: {
// 方法名称(state参数){}
// state参数可以帮助获取到vuex声明的共享数据
getCount(state) {
// 对共享数据count再加上200
return state.count + 200
}
},
在组建中使用getter: 获得getters的共享数据：{{ $store.getters.getCount }}
关于 Mutations: 切记同步
数据我们在页面是获取到了，但是如果我们需要修改count值怎么办？如果需要修改store中的值唯一的方法就是提交mutation来修改，我们现在在文件中添加按钮，这里我们点击按钮调用add（执行加的方法）和addN（执行减法的方法），然后在里面直接提交mutations中的方法修改值
// 对共享数据进行修改操作
mutations: {
// 对count进行累加1操作
// 方法参数state是固定语法，可以用以访问共享数据
add(state) { state.count++ },
// 对count指定参数进行累加操作
addN(state, arg) { state.count += arg },
// 定义一个异步累加方法
addAsync(state) {
setTimeout(() => {
state.count++
}, 1000)
}
},
在组件中使用Mutations:
首先注册事件:
<button @click="addOpt">对count累加操作(无参)</button>
<button @click="addOptN(5)">对count累加操作(参数)</button>
<button @click="addOptAsync">对count异步累加操作</button>
export default {
methods: {
// 对共享数据修改的方法
addOpt(){
// 要调用vuex mutations的add方法
// 语法：this.$store.commit(mutations的方法)
this.$store.commit('add')
},
addOptN(n){
// 要调用vuex mutations的add方法
// 语法：this.$store.commit(mutations的方法, 参数)
this.$store.commit('addN', n)
}
}
}
关于 Actions: 切记异步
虽然页面上的值是改变了；我们达到了修改store中状态值的目的，但是，官方并不建议我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，先定义actions提交mutation的函数
actions: {
// 对数据进行"异步"修改
// 方法(参数){}
// context是固定参数，可以用于调用mutations的方法
addAsync(context) {
// 异步设置
setTimeout(() => {
// 调用mutations中的操作方法
context.commit('add')
}, 1000)
},
// 根据参数进行异步修改
addAsyncN(context, n) {
setTimeout(() => {
context.commit('addN', n)
}, 1000)
}
},
在组件中使用:调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
Action 通过 store.dispatch 方法触发：
addOptAsync(){
// this.$store.commit('addAsync')
// 调用actions的成员方法，实现数据异步修改操作
this.$store.dispatch('addAsync')
},
关于 mapState、mapGetters、mapMutations、mapActions’优化vuex
首先
// 做按需导入
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
在组件中使用:
<p>直接获得count共享数据：{{ $store.state.count }}</p>
<p>mapState方式获得count共享数据：{{ count }}--{{ count1 }}</p>
<p>mapGetters方式获得共享数据：{{ getCount }}</p>
操作组件中的数据:
<p><button @click="add">通过mapMutations进行数据修改(无参)</button></p>
<p><button @click="addN(10)">通过mapMutations进行数据修改(有参)</button></p>
<p><button @click="addAsync">mapActions异步修改(无参)</button></p>
<p><button @click="addAsyncN(7)">mapActions异步修改(有参)</button></p>
methods:{
// 展开操作
...mapMutations(['add','addN']),
// 展开效果类似如下
add(){
this.$store.state.count++
},
addN(arg){
this.$store.state.count+=arg
},
...mapActions(['addAsync','addAsyncN'])
},
计算属性
computed:{
// 展开运算符使用，
// 作用是 把mapState函数的返回值做展开运算
...mapState(['count','count1']),
// mapState函数的返回值为：
// {count:function(){return xxx},count1:function(){return xxx}}
// 展开结果为如下：
// count:function(){
// return this.$store.state.count
// }
// count1:function(){
// return this.$store.state.count1
// }
...mapGetters(['getCount'])
}
