【Vue】状态管理

　　页面应用需要vuex管理全局/模块的状态，大型单页面组件如果靠事件（events）/属性（props）通讯传值会把各个组件耦合在一起。因 此需要vuex统一管理，当然如是小型单页面应用，引用vuex反而会增加复杂度。因此需要衡量引用vuex增加的收益是否大于成本。

快速入门

1. 安装vuex库

cnpm install -s vuex

2. 创建vuex.store

import vue from 'vue'import vuex from 'vuex'vue.u(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 i四川旅游必去景点ncrementasync({ commit }) {            return new promi((resolve, reject) => {                ttimeout(() => {                    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.u(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也提供辅助函数（ma河北师范大学宿舍pmutations）

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')`    })  }}

注意高二励志文章事项

mutation 必须是同步函数最好提前在你的 store 中初始化好所有所需属性。需要在对象上添加新属性时使用 vue.t 或 替换旧对象

action – 对mutation封装

action 类似于 mutation，不同在于：

action 提交的是 mutation，而不是直接变更状态。action 可以包含任意异步操作。

定义action

actions: {  increment ({ commit }) {    commit('increment')  }}

组件分发action

store.dispatc幼儿园教学计划h('increment')

支持异步方式分发

actions: {        async incrementasync({ commit }) {            return new promi((resolve, reject) => {                ttimeout(() => {                    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);        }      );

参考文章

vuex

转发请标明出处：/d/file/titlepic/12773090.html