Vuex基础浅析
1.Vuex是什么?Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。2.使用Vuex统一管理状态的好处能够在vuex中集中管理共享的数据,易于开发和后期维护能够高效的实现组件直接得数据共享,提高开发效率储存在vuex中的数据都是响应式的,能够实现数据与页面的同步3.什么样的数据储存在Vuex中一般情况下,只有组件之间共享的数据,才有必要储存在vuex中,对于组件
1.Vuex是什么?
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
2.使用Vuex统一管理状态的好处
- 能够在vuex中集中管理共享的数据,易于开发和后期维护
- 能够高效的实现组件直接得数据共享,提高开发效率
- 储存在vuex中的数据都是响应式的,能够实现数据与页面的同步
3.什么样的数据储存在Vuex中
一般情况下,只有组件之间共享的数据,才有必要储存在vuex中,对于组件的私有数据,依旧储存在自身的data中即可。
4.下载和使用Vuex
- 下载
npm install vuex -S //S代表生产环境使用
- 导入vuex包
这个是在main.js中导入
import Vuex from 'vuex'
Vue.use(Vuex)
- 创建store对象
const store = new Vuex.Store({
state:{count:0} //state中存放的就是全局共享的数据
})
- 将store对象挂载到vue实例中
new Vue({
el:"#app",
render:h => h(app), //渲染app和组件
router, //挂载路由
store
})
5.Vuex的核心概念
- State
- Mutation
- Action
- Getter
State: 提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行储存
// 创建store数据源,提供唯一的公共数据
const store = new Vuex.Store({
state:{count:0}
})
mutations: mutations里面是如何更改state中状态的逻辑。更改Vuex中的state的唯一方法是,提交mutation,即store.commit(‘increment’)。
actions: 因为mutations中只能是同步操作,但是在实际的项目中,会有异步操作,那么actions就是为了异步操作而设置的。这样,就变成了在action中去提交mutation,然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数,而mutations则是用commit函数。
Getter: 有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。此时可以用到getters,getters可以看作是store的计算属性,其参数为state。
const store = new Vuex.Store({
state: {
todos: [
{id: 1, text: 'reading', done: true},
{id: 2, text: 'playBastketball', done: false}
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done);
}
}
});
更多推荐
所有评论(0)