vueX是什么
是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享.
什么情况下我应该使用 Vuex?
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用,使用 Vuex 可能是比较复杂的因为他分为一块一块的(模块化)。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,vuex将数据分为一个一个模块,这样可以更方便管理。能够提高开发效率.
vuex好处:
1. 能够在vuex中,集中管理共享的数据,易于开发和后期维护
2. 能够高效地实现组件之间的数据共享,提高开发效率
3. 存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
vuex安装指令: npm install vuex --save
vuex文件配置:
- src里面创建store文件夹,在store文件夹里面创建创建index.js配置vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
//存放的内容所有组件都可以访问,类似于data
name:"张三'
},
mutations: {},
actions: {},
modules: {},
});
2.在main.js里面配置
import store from "./store";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
vuex里面的五个核心属性:
1.state:单一状态树
提供唯一的公共数据源,所有共享数据都要统一放到Store的State中进行存储
示例
创建store数据源,
const store = new Vuex.Store({
state:{
name:"张三"
}
})
在控制台里面的vue那里查看
1.在组件中使用this.$store.state.全局数据名称 ,来访问数据
2.使用计算属性获取最简单
computed:{
name(){
return this.$store.state.name
}
注意:在其他方法中不要直接修改state里面的属性,想要修改请使用Mutation
2.mutation:用于变更Store中的数据
特点:
- 提交更新数据的方法,必须是同步的(如果需要异步使用action)
- 只能通过mutation变更store数据,不可以直接操作Store中的数据
- 通过这个方式虽然操作起来稍微繁琐一些,但是可以集中监听所有数据的变化
注意:里面不要执行异步操作
/定义mutation
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
第一个参数是state对象,第二个参数是修改state里面数据
add(state,data){
变更状态
state.count=data;
//触发mutation
}
}
})
methods:{
aa(){
add是mutation里面的方法
触发mutation
this.$store.commit('add')
3.action:异步的方式修改state数据
和mutation功能大致相同,不同之处在与action提交的是mutation,必须要在mutation里面调用,而不是直接变更状态,可以包含异步操作
//定义action
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
state.count++
}
},
actions:{
//第一个参数是context
//第二个参数是修改state数据的参数比如num++
addAsync(context num){
setTimeout(()=>{
context.commit('add')
},1000)
}
}
methods:{
abc(){
addAsynce 是actions里面的方法,abc自己定义的方法
this.$store.dispatch('addAsynce')//组件中调用
dispatch 用来触发action的方法
4.getters:
特点:
- 从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法
- 会返回一个新数据,不会影响到state里面的老数据
- store中的数据发生变化.getter的数据也会跟着变化
const store = new Vuex.store({
state:{
count:0
},
getters:{
userId1:function(state){
return state.count * 2
}
}
触发 this.$store.getters.userId
modules:
用来模块化vuex,可以让每一个模块拥有自己的state,mutation,action,getters,使得结构非常清晰,方便管理具体请看官网:https://vuex.vuejs.org/zh/guide/modules.html.