本篇文章给大家带来的内容是关于vue.js状态管理模式vuex的安装与使用（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
uex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。安装、使用 vuex首先我们在 vue.js 2.0 开发环境中安装 vuex :
npm install vuex --save
然后 , 在 main.js 中加入 :
import vuex from 'vuex'vue.use(vuex);const store = new vuex.store({//store对象    state:{        show:false,        count:0    }})
再然后 , 在实例化 vue对象时加入 store 对象 :
new vue({  el: '#app',  router,  store,//使用store  template: '<app/>',  components: { app }})
现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
store.commit('increment')console.log(store.state.count) // -> 1
state在 vue 组件中获得 vuex 状态从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
// 创建一个 counter 组件const counter = {  template: `<p>{{ count }}</p>`,  computed: {    count () {      return this.$store.state.count    }  }}
mapstate 辅助函数当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapstate 辅助函数帮助我们生成计算属性:
// 在单独构建的版本中辅助函数为 vuex.mapstateimport { mapstate } from 'vuex'export default {  // ...  computed: mapstate({    // 箭头函数可使代码更简练    count: state => state.count,    // 传字符串参数 'count' 等同于 `state => state.count`    countalias: 'count',    // 为了能够使用 `this` 获取局部状态，必须使用常规函数    countpluslocalstate (state) {      return state.count + this.localcount    }  })}
当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapstate 传一个字符串数组:
computed: mapstate([  // 映射 this.count 为 store.state.count  'count'])
gettergetters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的,就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
getter 接受 state 作为其第一个参数：
const store = new vuex.store({  state: {    todos: [      { id: 1, text: '...', done: true },      { id: 2, text: '...', done: false }    ]  },  getters: {    donetodos: state => {      return state.todos.filter(todo => todo.done)    }  }})
通过属性访问getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
store.getters.donetodos // -> [{ id: 1, text: '...', done: true }]
getter 也可以接受其他 getter 作为第二个参数：
getters: {  // ...  donetodoscount: (state, getters) => {    return getters.donetodos.length  }}store.getters.donetodoscount // -> 1
组件中使用：
computed: {  donetodoscount () {    return this.$store.getters.donetodoscount  }}
注意，getter 在通过属性访问时是作为 vue 的响应式系统的一部分缓存其中的。
通过方法访问通过方法访问你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用:
getters: {  // ...  gettodobyid: (state) => (id) => {    return state.todos.find(todo => todo.id === id)  }}
store.getters.gettodobyid(2) // -> { id: 2, text: '...', done: false }
注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
mapgetters 辅助函数mapgetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
import { mapgetters } from 'vuex'export default {  // ...  computed: {  // 使用对象展开运算符将 getter 混入 computed 对象中    ...mapgetters([      'donetodoscount',      'anothergetter',      // ...    ])  }}
如果你想将一个 getter 属性另取一个名字，使用对象形式：
mapgetters({  // 把 `this.donecount` 映射为 `this.$store.getters.donetodoscount`  donecount: 'donetodoscount'})
mutation更改 vuex 的 store 中的状态的唯一方法是提交 mutation。
注册：
const store = new vuex.store({  state: {    count: 1  },  mutations: {    increment (state) {      // 变更状态      state.count++    }  }})
调用：
store.commit('increment')
提交载荷（payload）你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：
// ...mutations: {  increment (state, n) {    state.count += n  }}
store.commit('increment', 10)
如果提交多个参数，必须使用对象的形式进行提交
// ...mutations: {  increment (state, payload) {    state.count += payload.amount  }}
store.commit('increment', {  amount: 10})
注：mutations里的操作必须是同步的；
actionaction 类似于 mutation，不同在于：
action 提交的是 mutation，而不是直接变更状态。
action 可以包含任意异步操作。
const store = new vuex.store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  },  actions: {    increment (context) {      context.commit('increment')    }  }})
action 通过 store.dispatch 方法触发：
store.dispatch('increment')
在 action 内部执行异步操作：
actions: {  incrementasync ({ commit }) {    settimeout(() => {      commit('increment')    }, 1000)  }}
对象形式传参：
// 以载荷形式分发store.dispatch('incrementasync', {  amount: 10})
相关推荐：
vue.js之vuex(状态管理)
vuex状态管理应如何使用
关于vuex的全家桶状态管理
以上就是vue.js状态管理模式vuex的安装与使用（代码示例）的详细内容。