谁有网站你懂的,红楼外传,原谅我萧敬腾
快速入门
1. 安装vuex库
cnpm install -s vuex
2. 创建vuex.store
我要评论import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex);
const store = new vuex.store({
//组件数据源，单一的state属性
state: {
clickcount: 0
},
//相当于属性，封装获取state
getters: {
getclickcount: state => {
return state.clickcount;
}
},
//封装引起状态变化的方法
mutations: {
increment(state) {
state.clickcount++;
}
},
//类似于 mutation，不同在于actions支持异步，不是直接变更状态，而是提交到mutation
actions: {
increment(context) {
context.commit('increment')
},
async incrementasync({ commit }) {
return new promise((resolve, reject) => {
settimeout(() => {
try {
commit('increment');
resolve(new date().gettime() + ' 成功执行');
} catch (e) {
reject(e);
}
}, 1000)
});
}
}
});
export default store;
3. vue实例加入store
new vue({
router: router,
store: store,
render: h => h(app),
}).$mount('#app')
4. 组件获取store值
<script>
import { mapgetters } from "vuex";
export default {
computed: mapgetters({ count: ["getclickcount"] }),
};
</script>
5. 组件触发更新
<script>
export default {
data() {
return { times: 0 };
},
methods: {
increment() {
this.times++;
//分发到action
this.$store.dispatch("incrementasync");
//提交到mutations
this.$store.commit("increment");
},
},
};
</script>
解析
vuex 是什么？
vuex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex 也集成到 vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
state - 数据源
vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。
vue通过store选项，调用vue.use(vuex)注入到每一个子组件中（类似路由）
组件获取state
computed: {
count () {
return this.$store.state.count
}
}
或者使用辅助函数mapstate
computed: mapstate({
// 箭头函数可使代码更简练
count: state => state.count
})
getter - 数据封装读取（类似属性）
getter 接受 state 作为其第一个参数
getters: {
donetodos: state => {
return state.todos.filter(todo => todo.done)
},
gettodobyid: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
通过属性访问
store.getters.donetodos
通过方法访问
store.getters.gettodobyid(2)
getters 也提供了一个辅助函数方便访问（mapgetters ）
mutation - 进行状态更改的地方
定义mutation
mutations: {
increment (state, n) {
state.count += n
}
}
组件触发变更
store.commit('increment', 1)
mutations也提供辅助函数（mapmutations）
import { mapmutations } from 'vuex'
export default {
// ...
methods: {
...mapmutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapmutations` 也支持载荷：
'incrementby' // 将 `this.incrementby(amount)` 映射为 `this.$store.commit('incrementby', amount)`
]),
...mapmutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}
注意事项
action - 对mutation封装
action 类似于 mutation，不同在于：
定义action
actions: {
increment ({ commit }) {
commit('increment')
}
}
组件分发action
store.dispatch('increment')
支持异步方式分发
actions: {
async incrementasync({ commit }) {
return new promise((resolve, reject) => {
settimeout(() => {
try {
commit('increment');
resolve(new date().gettime() + ' 成功执行');
} catch (e) {
reject(e);
}
}, 1000)
});
}
}
组件调用异步分发
this.$store.dispatch("incrementasync").then(
(data) => {
console.log(data);
},
(err) => {
console.log(err);
}
);
参考文章
转发请标明出处：https://www.cnblogs.com/wilsonpan/p/12773090.html
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论