浅谈Vuex的状态管理(全家桶)

浅谈Vuex的状态管理(全家桶)

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

以上是vuex的官方文档对vuex的介绍，官方文档对vuex的用法进行了详细的说明。这里就不再细讲vuex的各个用法，写这篇博客的目的只是帮助部分同学更快地理解并上手vuex。

1. 安装

$ npm install vuex --save

2. 在main.js 主入口js里面引用store.js

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './vuex/store' //引用store.js

Vue.config.productionTip = false //阻止在启动时生成生产提示

//vue实例

new Vue({

el: '#app',

router,

store, //把store挂在到vue的实例下面

template: '',

components: { App }

})

3. 在store.js里引用Vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex) //注册Vuex

// 定义常量 如果访问他的话，就叫访问状态对象

const state = {

count: 1

}

// mutations用来改变store状态, 如果访问他的话，就叫访问触发状态

const mutations = {

//这里面的方法是用 this.$store.commit('jia') 来触发

jia(state){

state.count ++

},

jian(state){

state.count --

},

}

//暴露到外面，让其他地方的引用

export default new Vuex.Store({

state,

mutations

})

4. 在vue组件中使用

使用$store.commit('jia')区触发mutations下面的加减方法

+

-

5. 查看演示

6. state访问状态对象

使用computed计算

+

-

7. mutations触发状态 （同步状态）

+

-

8. getters计算属性

getter不能使用箭头函数，会改变this的指向

在store.js添加getters

// 计算

const getters = {

count(state){

return state.count + 66

}

}

export default new Vuex.Store({

state,

mutations,

getters

})

//count的参数就是上面定义的state对象

//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。

组件中使用

9. actions (异步状态)

在store.js添加actions

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

// 定义常量

const state = {

count: 1

}

// mutations用来改变store状态 同步状态

const mutations = {

jia(state){

state.count ++

},

jian(state){

state.count --

},

}

// 计算属性

const getters = {

count(state){

return state.count + 66

}

}

// 异步状态

const actions = {

jiaplus(context){

context.commit('jia') //调用mutations下面的方法

setTimeout(()=>{

context.commit('jian')

},2000)

alert('我先被执行了，然后两秒后调用jian的方法')

},

jianplus(context){

context.commit('jian')

}

}

export default new Vuex.Store({

state,

mutations,

getters,

actions

})

在组件中使用

+

-

+plus

-plus

10. modules 模块

适用于非常大的项目，且状态很多的情况下使用，便于管理

修改store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state = {

count: 1

}

const mutations = {

jia(state){

state.count ++

},

jian(state){

state.count --

},

}

const getters = {

count(state){

return state.count + 66

}

}

const actions = {

jiaplus(context){

context.commit('jia') //调用mutations下面的方法

setTimeout(()=>{

context.commit('jian')

},2000)

alert('我先被执行了，然后两秒后调用jian的方法')

},

jianplus(context){

context.commit('jian')

}

}

//module使用模块组的方式 moduleA

const moduleA = {

state,

mutations,

getters,

actions

}

// 模块B moduleB

const moduleB = {

state: {

count:108

}

}

export default new Vuex.Store({

modules: {

a: moduleA,

b: moduleB,

}

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。