new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
上面是我们定义的一个vue的实例
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
what is 状态管理模式?
状态管理模式
1:state:驱动应用的数据源,比如组件当中的data就是数据源
2:view:以声明的方式将state映射到视图,比如组件上面的那些标签
3:actions:响应在视图view上面用户操作导致的状态变化,比如组件当中methods中的事件
//自己的理解,他们三有啥共同点? count,他们三都用到了这个值,如果只是单个组件中用到这个值,那么还可以控制,如果是多个组件同时用到这个数据呢?
//store就是将这些共享的状态抽出来,用一个全局单例模式进行管理
重点:全局--表示所有的组件都可以访问
:单例--表示Vuex只有一个实例
//这是一个store的实例,暂时还没有加入模块
export default new Vuex.Store({
state,
getters,
mutations,
actions,
})
构造器选项的解析:
state:类型为对象或者函数,如果是对象的话就会被当做根state,如果传入的是一个返回对象的函数,那么返回的对象作为根state
作用:存放数据
全局访问 this.$store.state--将store注入到了根节点的情况
//state对象属性可以定义成所有数据类型
const state = {
userInfo: { phone: 111 }, //用户信息
orderList: [{ orderno: '1111' }], //订单列表
orderDetail: null, //订单产品详情
login: false, //是否登录
numver:1,
myfunction:function() {
console.log(arguments);
},
}
当我们组件需要使用这个状态的时候,并且随着状态改变,组件的视图也会改变,那么最简单的方式就是在计算属性中返回某个状态
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
//待续...如果组件需要多个状态呢?十个状态就要写十个计算实属性吗?
打个比方,你返回了一个数组,但是我们需要的是排序后的数组,并且多个组件都需要这个排序后的数组,解决办法无非是每个组件都重新进行对数组排序,或者写一个公共的方法,然后每个组件都引用这个方法
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来(当通过属性访问的时候)，且只有当它的依赖值发生了改变才会被重新计算,
注意:getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果
getters:{ [key: string]: Function },没错这货是对象,并且他的所有属性都必须为函数
const getters = {
myFirstGetter:function(state,getters){
console.log(arguments);
},
mysecondGetter:function(state,getters){
console.log(arguments);
return function(param) {
console.log(arguments)
}
}
}
作用:定义计算属性 //是的,计算属性,只不过这些计算属性是依赖state里面的数据
原因:我们确实可以在组件中对state的数据进行操作,但是多个组件获取同一个状态,都要进行相同的操作呢,那还不如我们集中管理.
全局访问 this.$store.getters
重点:所有的处理函数总是接收state作为第一个参数 ,接收其他的getter作为第二个参数
getters里面的方法的调用方式:
1:以属性的形式访问store.getters.funName //不要带括号,不要带括号,不要带括号
2:以方法的形式访问store.getters.funName(param) //前提是这个定义的方法的返回值必须是个函数,且param是作为返回值函数的参数.
待续.... 但是函数的参数很奇怪啊
mutations:类型{ [type: string]: Function },一个又一个函数
官方文档解释 { [type: string](事件类型): Function(回调函数) }
作用:如果我们在各自的组件当中更改状态的话,那么必然导致其他的组件也会更新该状态,最后我们都不知道到底是谁在更新这个状态,所以采用mutations提交的形式进行状态更改的管理,像不像git提交代码的形式...
全局访问 this.$store._mutations
重点:所有的回调函数(也就是进行状态更改的地方)总是接收state(没错就是上面的那个state)作为第一个参数
mutations里面的方法调用方式:
store.commit('funName')--这种是我们没有把store注入到根组件
this.$store.commit('funName') --这种是注入了根组件,那么在每一个子组件都可以这种方式
然后我们还可以传参数
this.$store.commit('funName',{}) 参数作为对象这样可以包含多个字段
还有一种方式,使用包含type属性的对象, this.$store.commit({type:'funName',key:value})
重点:原则就是要记住 mutation 必须是同步函数
actions:类型{ [type: string]: Function },也是一个又一个函数,
官方文档解释 { [type: string](事件类型): Function(回调函数) }在回调函数当中,我们进行状态改变
全局访问 this.$store._actions
actions里面的方法调用方式: store.dispatch('funName') 同理于mutations
重点:所有的处理函数总是接收"context"作为第一个参数,他是一个对象... 一个与 store 实例具有相同方法和属性的对象
{ //感觉好厉害的样式,但是暂时不知道有什么用
state, // 等同于 `store.state`，若在模块中则为局部状态
rootState, // 等同于 `store.state`，只存在于模块中
commit, // 等同于 `store.commit`
dispatch, // 等同于 `store.dispatch`
getters, // 等同于 `store.getters`
rootGetters // 等同于 `store.getters`，只存在于模块中
}
重点:Action 与mutations的区别
1:Action 提交的是 mutation，而不是直接变更状态
2:Action 可以包含任意异步操作
Module:Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter
甚至于嵌套子模块,模块又是由几个模块组成
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) 1:对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象 --state
2:对于模块内部的actions,局部状态通过 context.state暴露出来,根节点状态则为 context.rootState
3:对于模块内部的 getter，根节点状态会作为第三个参数暴露出来