vuex初识

171 阅读3分钟

vuex的初识

首先安装vuex (npm install vuex --save)

创建vuex文件夹 创建 store.js 在store.js 中引入vue和vuex 并在vue上挂在vuex

import vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)

// 在这些对象里面有一些对象里面的函数需要接受或者传递参数,那么在这些函数的参数需要加 state
var state = {
count: 1
}
var mutations ={
// 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
setName (state, count) {

}
}
var actions ={ // 类似于computed 计算属性

}
var getters = {

}
// 创建vuex实例
const store = new Vuex.Store(
{
// 注册vuex方法
state,
actions,
getters,
mutations
})
// 向外暴露store实例
export default store


在其它页面中使用 store时,需要先引入,后挂载
import store from 'store.js'
data () {
return {
store // 相当于store:store
}
}

// 在store挂载后,通过 this.store.state.count 来访问store中state的count属性
this.store.getters.xxx 来访问store中的getters的一些方法 this.store.dispatch('方法名',参数) 来调用store中的actions的方法
    在actions中通过context调用mutations中的方法
        context('<此处时mutations对象中方法的名称>', 参数)
this.store.commit('方法名',参数) 来调用store中的mutations的方法

注意事项->转载 : www.imooc.com/article/218… 基本组成:

    注意到这个store对象包含三个子对象:

      state、mutations、actions

    其中state用于存储数据,类似vue实例的data属性。

    mutations用于递交更改,对state对象中的属性数据进行更改。

    actions用于进行递交异步更改,通过调用mutations实现对数据的更改。

  actions与mutations的区别:

    其中actions区别于mutations的地方在于mutations只能进行同步更改,而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性

    函数执行,而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。

  定义actions与mutations属性函数的注意事项:

    其中定义mutations属性函数时必须传递的第一个参数是state,因为要对state进行更改,第二个参数代表传入的新参数。mutations属性函数只接受两个参数,如果要同时更

    改多个属性值,可以通过对象传入。

    在actions属性函数中可以通过context.commit()方法触发mutations属性函数。定义actions属性函数时,必须传递的第一个参数是context,用于触发mutations函数。

  触发actions与mutations属性函数的方法:

    在子组件中通过this.$store.commit()方法触发mutations属性函数。在注册store的Vue实例中(第三步中将会讲到)可以通过store.commit()触发。

    commit函数第一个参数是mutations的属性函数名,第二个参数是传入的新值。

    actions属性函数中可以进行异步操作,比如通过ajax或者Vue.Resource()进行数据获取,获取数据后再通过context.commit()触发更改。

    触发actions属性函数使用this.$store.dispatch()或者store.dispatch() (在注册store的Vue实例中)函数。dispatch函数传递的一个参数是actions属性函数名称。如果希望在

    Vue实例创建完成还未挂载时就从后端获取数据,则可以在created钩子函数中调用actions属性函数。

  在组件中访问数据中心state的注意事项:

    在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后,组件会自动更新,则应该使用组件的computed属性定义数据,而

    不是通过data属性定义。如果使用data定义组件数据,则state中的数据发生更改之后组件不会发生变化。