Vuex的初步使用详解
vuex 一般用来解决某些值,在不同的组件中都要用到,如果两个组件经过路由直达传参还好,一旦是跨了好几层路由之间传参,比如想要登录后的token,登录后的用户名。购物车的数量显示等,有些还要实时更新。不可能一直传来传去。这个时候使用Vuex。数据保存在state中,想要更改必须通过 Mutations里的方法才能更改。想要调用Mutations里的方法 必须在Actions 里用comm...
·
vuex 一般用来解决某些值,在不同的组件中都要用到,如果两个组件经过路由直达传参还好,一旦是跨了好几层路由之间传参,比如想要登录后的token,登录后的用户名。购物车的数量显示等,有些还要实时更新。不可能一直传来传去。这个时候使用Vuex。
数据保存在state中,想要更改必须通过 Mutations里的方法才能更改。想要调用 Mutations里的方法 必须在Actions 里用commit函数调用。在组件内通过vuex 的dispatch方法调用Actions里的方法。当调用成功了,更改视图。
mutation 必须同步执行 action里的方法可以异步处理
写一个全套例子(包含所有使用方法)
写个store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
message: {
state: {
orderId: 0
},
mutations: {
SET_ORDER_ID: (state, code) => {
state.orderId = code;
}
},
actions: {
// 订单Id
setOrderId({ commit }, data) {
// 通知mutations 里的SET_ORDER_ID方法更改
commit('SET_ORDER_ID', data);
},
// 其他方法中调用 actions中方法
setAdd({ commit, dispatch }, data) {
let newOrder = data + 100; // 这里假设它要加一百,这就是这个函数的意义。
dispatch('setOrderId', newOrder);
}
}
},
colorNumber: {
state: {
color: 'green'
},
mutations: {
SET_COLOR: (state, color) => {
state.color = color;
}
},
actions: {
// 订单Id
setOrderId({ commit }, data) {
// 通知mutations 里的SET_COLOR方法更改
commit('SET_COLOR', data);
}
}
}
},
getters: {
orderId: state => state.message.orderId,
color: state => state.colorNumber.color
}
});
export default store;
main.js中
import store from './store';
new Vue({
store
render: h => h(App)
}).$mount('#app');
此时已经可以在组件中用了。
组件中使用vuex中的变量
console.log(this.$store.getters.color)
想要调取vuex中方法更改状态
this.$store.dispatch('setAdd',30);
未完待续
更多推荐
已为社区贡献25条内容
所有评论(0)