一、vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex.png
二、什么情况下我应该使用 Vuex？
- 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式
- 适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：
① 多个视图使用于同一状态：
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
② 不同视图需要变更同一状态：
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码
三、Vuex 和单纯的全局对象有何不同？
1.Vuex 的状态存储是响应式的
当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation，方便我们跟踪每一个状态的变化。
四、Vuex核心概念
1、store：类似容器，包含应用的大部分状态
一个页面只能有一个容器
状态存储是响应式的
不能直接改变store中的状态，唯一途径显示地提交mutations
在actions里面，也不能直接更改state里面的状态值，必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值；如果要再次请求异步，那么就是dispatch一个actions
2、State：包含所有应用级别状态的对象
3、Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed
4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions
5、Actions：包含异步操作、提交mutations改变状态
6、Modules：将store分割成不同的模块
五、下载安装vuex
//下载
npm install vuex --save
//使用
2、作为插件使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3、定义容器
new Vuex.Store({
state:{
num:0
},
mutations:{ //对象，里面是各种更改state状态值的函数，同步立即更改状态
add( state,payload ){ //参数state就是上面的state，payload是要传递的值
state.num+=payload.n;
}
reduce(state){
state.num--
}
},
actions:{
//异步更改状态，可以是ajax请求成功之后改变状态，这里用定时器模拟，1秒钟之后提交mutations改变状态
//异步的更改状态是直接在index.js里面的actions里面定义action然后commit的(附带参数)，而不是在组件内提交，注意区别，异步是在组件内dispatch这个actions(actions里面已经包含了mutations)，同步是在组件内commit这个mutations(附带参数)
//异步也可以在index.js里面直接dispatch这个actions(附带参数)
addAction( context ){
context.commit("add")
}
reduceAction( {commit}){
commit("reduce")
}
//利用es6解构赋值改写上面的代码，因为context对象下面有commit和dispatch方法
addAction( {commit,dispatch} ){
setTimeout(function(){
commit('add',{n:200}); //直接可以获取到commit方法，不用是context.commit
dispatch('textAction',{test:'测试'})
},1000)
}
reduceAction( context,obj ){ //ajax2
console.log(obj)
}
},
//异步更改状态,一段时间之后再改变状态，只要是异步的改变都写在actions里面
getters:{ //类似计算属性，对状态做进一步的处理
filternum(state){
return state.num>=120?120:state.num++;
}
}
})
export default store
4、注入根实例
import store from './store'
new Vue({
store
})
5、在state里面定义的是状态，如果在组件内部要使用这个状态，那么一般在组件内部通过计算属性来得到它
//vuex.vue
<template>
<button @click="add()">+</button>
<p>{{num}}</p>
//通过getter进行计算后的值
<p>{{num1}}</p>
<button @click="reduce">-</button>
</template>
<script>
export default{
computed:{
num(){
return this.$store.state.num
},
num1(){
return this.$store.getters.filternum //被getters进一步处理过的状态
}
},
methods:{
add(){
//要动态的改变状态，就需要显示的提交一个mutations —> add
//同步，写法一
this.$store.commit('add',{n:10})
//同步，写法二
this.$store.commit({
type:'add',
n:5
})
//异步，写法
this.$store.dispatch('addAction')
}，
reduce(){
//要动态的改变状态，就需要显示的提交一个mutations —> add
//同步，写法一
this.$store.commit('reduce',{n:10})
}
}
</script>
六、辅助函数
//vuextwo.vue
<template>
<div>
<button @click="addAction">+</button>
{{num}}
<button @click="reduceAction">-</button>
</div>
</template>
<script>
// mapstate 辅助函数
import {mapState,mapMutations,mapGetters,mapActions} from "vuex"
export default {
data(){
return{
}
},
// 计算属性 setter getter
//第一种写法
// computed: {
// num(){
// return this.$store.state.num
// }
// },
// 第二种写法
// computed: {
// ...mapState(["num"])
// },
//第三种写法
// computed:mapState(["num","list"]),
//采用getters进行计算
computed: {
...mapGetters(["num"])
},
// methods:{
// ...mapMutations(["add","reduce"])
// },
// methods:mapMutations(["add","reduce"])
methods:mapActions(["addAction","reduceAction"])
}
</script>
<style scoped>
</style>
如果感觉有帮助，给予一个宝贵的赞！！！！
网友评论