VueX(Vue状态管理模式)
1、首先应该了解什么是vuex?
vuex是适用于在vue开发项目时使用的状态管理工具。
2、阐述vuex在项目中的使用过程和搭建过程?
-
首先在src目录下创建一个sotre文件夹,然后在文件夹中创建一个index.js文件
-
接着就是store仓库的安装了
安装:cnpm install store --save 在main.js中引入:import store from './store' 把store挂载到当前vue实例上
-
下一步就是安装vuex
安装:cnpm install vuex --save 初始化store下的index.js内容: import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex) let store = new Vuex.Store({}) export default store
3、vuex在项目中的应用?(属性)
- state:是仓库,用来存储状态(变量)。在组件中通过使用 this.$store.state.属性名 来使用
- mutations:用来写方法,它是可以直接操作state中的数据,可以同步,但是不可以异步。在组件中通过使用 this.$store.commit(“方法名”,参数) 来使用,和组件中的自定义事件类似。当我们需要提交多个参数时,就可以把他们放在一个对象中来提交
- getters:类似于state的计算属性。在组件中通过使用 this.$store.getters.方法名 来使用
- actions:在mutation中进行提交,会引起数据失效,所以用actions来进行异步修改状态。由于是异步操作,所以就可以为异步操作封装一个promise对象。在组件中通过使用 $store.dispath(’’) 来使用。
- models:它是命名空间的处理,为了开发大型项目,可以使用模块化管理模式。每个模块都拥有自己的state、mutation、action、getter。我们在使用的过程中,首先需要在store仓库下新建一个person.js文件,在文件中写state、mutations、actions、getters,然后在store仓库下的index.js文件中的models下挂载person.js文件,这样就可以使用了。
- plugins:类似于本地仓库
下载:cnpm install vuex-persistedstate --save
首先需要在store仓库中引入:import createPersistedState from “vuex-persistedstate”
然后在 let store下写入:plugins:[createPersistedState()]
4、vuex辅助函数
vuex为我们提供了一些非常方便的辅助函数,比如mapState、mapGetter、mapMutation、mapAction
- mapState:引入:import { mapState } from 'vuex
有三种方式:- 第一种:对象:如果使用箭头函数,当vuex中的state和当前组件的state,含有相同的变量名称时,this获取的是vuex中的变量,而不是局部变量
computed: mapState({
// 箭头函数
count: state => state.count,
// 这里为了能够使用this获取局部变量localCount,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
}) - 第二种:数组:当映射的计算属性名称与state的子节点名称相同时,我们也可以给mapState传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
‘count’
]) - 第三种:对象展开运算符:mapState函数返回的是一个对象。如果需要将它与局部计算属性混合使用时,通常我们需要一个工具函数将多个对象合并为一个,因此我们可以将最终对象传给computed属性。也可以使用
...mapState([])
,但前提是映射的计算属性名称与state的子节点名称相同,如果state在vuex的modules中,则不成功。
computed: {
localComputed () {},
…mapState({})
}
- 第一种:对象:如果使用箭头函数,当vuex中的state和当前组件的state,含有相同的变量名称时,this获取的是vuex中的变量,而不是局部变量
- mapGetters:将store中的getter映射到局部计算属性
computed: {
…mapGetters([
‘oneGetter’,
‘anotherGetter’
])
} - mapMutations:使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
methods: {
// 将this.tips映射成 this.$store.commit(‘tips’)
…mapMutations([‘tips’])
} - mapAction:使用mapActions辅助函数将组件中的methods映射成store.dispatch调用
methods: {
// 将this.tips映射成 this.$store.dispatch(‘tips’)
…mapActions([‘tips’])
}
5、命名空间
- 概念:默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的。
- 弊端1:不同模块中有相同命名的mutations、actions时,不同模块对相同的 mutation 或 action 作出响应。
- 弊端2:当一个项目中store分了很多模块的时候,使用辅助函数时,就很难查询,不便于后期的维护。
可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
在模块中添加 namespaced: true, 开始命名空间。在根store中引入模块并挂载,在组件中使用,模块中定义的“permissionList” state
- 第一种方式:导入辅助函数mapState
import { mapState } from “vuex”;
export default {
props: {
data: {
type: Object,
default: “chart”
}
},
data() {
return {
list: {}
};
},
computed: {
// 在辅助函数mapState的第一参数上,填写上模块的命名空间名。根据挂载方式不同,此处的命名空间名就是 wechatType 或 aaa。
…mapState(‘命名空间名’, [“permissionList”])
}, - 第二种方式:通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
import { createNamespacedHelpers } from “vuex”;
const { mapState } = createNamespacedHelpers(‘命名空间名’)
export default {
computed: {
…mapState([“permissionList”])
}
}