vuex
:同一状态(全局状态)管理,简单的理解,在SPA单页面组件的开发中,在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、修改,并且你的修改可以同步全局。
- 安装 npm i vuex --save
- 在src文件目录下新建store>index.js文件
//导入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex)
export default new Vuex.Store({
//设置全局访问的state对象
state: {
count: 1//设置初始的值
},
//唯一允许改变state的值
mutations: {
add (state) {
// 变更状态
state.count++
},
addN (state, N) {
// 可传参
state.count += N
}
},
actions: {
addFun (context) {
context.commit('add')
},
//可以在 action 内部执行异步操作
addAsync ({ commit }) {
setTimeout(() => {
commit('add')
}, 1000)
}
}
})
- 入口文件里面引入store,然后再全局注入
import store from './store'//引入store
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
- 使用
4-1,在state中定义数据
4-2,Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,Getters 可以用于监听、state中的值的变化,返回计算后的结果
4-3,给action注册事件处理函数,当这个函数被触发时候,将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参
4-4,mutations是一个对象里。面的方法 都是同步事务,是更改state初始状态的唯一合法方法,具体的用法就是给里面的方法传入参数state或额外的参数
dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch(‘action方法名’,值)
commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)