vuex使用文档的示例分析

npm install vuex --save

import Vue from 'vue'
　　import Vuex from 'vuex'
　　Vue.use(Vuex)

　const Counter = {
　　　　　　　　template: '
{{ count }}
'
　　　　　　　　computed: {
　　　　　　　　　　count ()｛
　　　　　　　　　　　　return store.state.count
　　　　　　　　　　｝
　　　　　　　　}
　　　　　　}

　const app = new Vue({
　　　　　　　　el:'#app',
　　　　　　　　// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所 有的子组件
　　　　　　　　store,
　　　　　　　　components: {Counter},
　　　　　　template: '
　　　　　　　　
　　　　　　　　　　
　　　　　　　　

 　　通过在根实例中注册 store 选项，该store 实例会注册入到跟组件下的所有子组件，且子组件能通过 this.$store 访问到。更新 counter 的实现：　　　

　const Counter = {
　　　　　　　　template : '
{{ count }}
',
　　　　　　　　computed: {
　　　　　　　　　　count this.$store.state.count
　　　　　　　　　　}
　　　　　　}

mapState 辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些冗余。

为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。　　　　

// 在单独构建的版本中辅助函数为 Vuex.mapState
　　　　　　import { 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'
　　　　　　　　　　])

组件仍然保有局部状态。

Getters

有时候我们需要从store 中的state 中 的state 中派生一些状态，列如对列表进行过滤并计算。　

　　　　computed: {
　　　　　　　　doneTodosCount() {
　　　　　　　　　　　　return this.$store.state.todos.filter(todo => todo.done).length
　　　　　　　　}
　　　　　　}

Vuex 允许我们再store 中定义getters (可以认为是stroe 的计算属性)

Getters 接受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)
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　})

Getters 会暴露为store.getters 对象：　

　store.getters.doneTodos // [{id:1,text: '...',done:true}]

Getter 也可以接受其他getters 作为第二个参数：　　　

getters: {
　　　　　　　　　　doneTodosCount: (state,getters) => {
　　　　　　　　　　　　return getters.doneTodos.length
　　　　　　　　　　}
　　　　　　}
　　　　store.getters.doneTodosCount // -> 1

我们可很容易的在任何组件中使用　　　　　

　computed: {
　　　　　　　　　　doneTodosCount() {
　　　　　　　　　　　　return this.$store.getters.doneTodosCount
　　　　　　　　}
　　　　　　}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是 store 中的getters 映射到局部计算属性。　　　　

import {mapGetter} form 'vuex'
　　　　　　export default {
　　　　　　　　computed: {
　　　　　　　　　　// 使用对象展开运算符将 getters 混入
　　　　　　　　　　...mapGetters([
　　　　　　　　　　　　　　‘doneTodosCount',
　　　　　　　　　　　　　　'anotherGetter'
　　　　　　　　　　　　])
　　　　　　　　　　}
　　　　　　　　}

 　　如果你想讲一个getter 属性另取名字，使用对象性时

mapGetters({
 　　　　　　　　// 映射 this.doneCount 为 store.getters.doneTodosCount
　　　　　　　　　　doneCount: 'doneTodosCount'
　　　　　　})

Mutations

更改Vuex 的store 中的状态的唯一方式就是提交 mutation Vuex 中的mutation

非常类似于事件，每个 mutation 都有一个字符串的 事件类型 和回调函数。这个回调函数就是我们实际进行状态更改的地方。并且他会接受 state 作为第一个参数。　　

const store = new Vue.Store({
　　　　　　　　state: {
　　　　　　　　　　　　count: 1
　　　　　　　　},
　　　　　　mutations: {
　　　　　　　　　　inctement (state) {
　　　　　　　　　　state.count++
　　　　　　　　}
　　　　　　}
　　　　})

 　　当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个

 　　　　mutation handler，你需要以相应的 type 调用 store.commit 方法  　　

store.commit('increment')

提交载荷(Payload)

你可以向store.commit 传入额外的参数，即mutation 的载荷：         

mutations: {
　　　　　　　　　　increment (state, n) {
　　　　　　　　　　state.count += n
　　　　　　　　}
　　　　　　}
　　　　　　store.commit('increment', 10)

 　　在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录 mutation会更易读。　　　

mutations: {
　　　　　　increment (state,payload) {
　　　　　　　　state.count += payload.amount
　　　　　　　　}
　　　　　　}
　　　　　　store.commit('increment', {
　　　　　　　　amount:10
　　　　})

对象风格的提交方式

提交mutation 的另一种方式直接使用包含 type 属性的对象：　　

　store.commit({
　　　　　　　　type: 'increment',
　　　　　　　　amount:10
　　　　　　})

当使用对象风格的提交方式，整个对象作为载荷传给mutation 函数，因此handler保持不变：　　　

　mutations: {
　　　　　　　　increment (state, payload) {
　　　　　　　　　　state.count += payload.amount
　　　　　　　　}
　　　　　　　}

Mutations 需遵守vue 的响应规则

既然Vuex的store 中的状态是响应式的，那么当我们变更状态时，监视状态的vue更新 ，这也意味值Vue 中的mutation 也需要与使用 Vue 一样遵守一些注意事项。

1. 最好提前在你的store 中初始化好所有的所需要的属性。

2.当需要在对象上提交新属性时，你应该使用　　　　　　

Vue.set(obj, 'newProp', 123)

使用新对象代替老对象  state.obj= {...state.obj ,newProp: 123}

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式　　　

export const SOME_MUTATION = 'SOME_MUTATION';
　　　　　　import Vuex from 'vuex'
　　　　　　import {SOME_MUTATION } from './mutation-types'
　　　　　　const store = new Vuex.Store({
　　　　　　　　　　state： {...}
　　　　　　　　　　mutations: {
　　　　　　　　　　　　// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
　　　　　　　　　　　　[SOME_MUTATION] (state) {
　　　　　　　　　　　　// mutate state
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　})

mutation 必须是同步函数

一条重要的原则是记住 mutation 必须是同步函数。　　　　　

　mutations: {
　　　　　　　　　　someMutation (state) {
　　　　　　　　　　　　api.callAsyncMethod(() => {
　　　　　　　　　　　　　　　　state.count++
　　　　　　　　　　　　})
　　　　　　　　　　}
　　　　　　　　}

 在组件中提交 Mutations

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使使用 mapMutations辅助函数将组建中的methods 映射为 store.commit 调用 (需要在根节点注入 store)　　

import {mapMutations} from 'vuex'
　　　　　　expor default {
　　　　　　　　methods: {
　　　　　　　　　　mapMutations([
　　　　　　　　　　　　　　methods: {
　　　　　　　　　　　　　　　　mapMutations([
　　　　　　　　　　　　　　　　　　'increment' // 映射 this.increment() 为 this.$store.commit('increment')
　　　　　　　　　　]),
　　　　　　　　mapMutations({
　　　　　　　　　　　　　　add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
　　　　　　　　　　})
　　　　　　　　}
　　　　　　])
　　　　　　}
　　　　}

Actions  

在mutation 中混异步调用会导致你的程序很难调试。

Actions

Action 类似于 mutation,不同在于。

Action 提交的是 mutation ,而不是直接变更状态。

Action 可以包含任意异步操作。

注册一个简单的 action　　

const store = new Vuex.Store({
　　　　　　state: {
　　　　　　　　　　count：0
　　　　　　}，
　　　　mutations: {
　　　　　　increment (state) {
　　　　　　　　state.count++
　　　　　　}
　　　　},
　　　　actions: {
　　　　　　　　increment (context){
　　　　　　　　　　context.commit('increment')
　　　　　　　　　　}
　　　　　　　　}
　　　　})

Action 函数接受一个与store 实例具有相同方法和属性的context 对象，因此你可以调用 context.commit 提交一个mutation,或者通过 context.state 和context.getters 来获取 state 和 getters 当我们在之后介绍到Modules时，你就知道 context 对象为什么不是store 实例本身了。　

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

分发 Action

Action 通过 store.dispatch 方法触发： 　　

store.dispatch('increment')

我们可以在 action 内部执行异步操作。　

　actions: {
　　　　　　incrementAsync({commit}){
　　　　　　　　setTimeout(() => {
　　　　　　　　　　commit('increment')
　　　　　　　　},1000)
　　　　　　　　}
　　　　　　}

Actions 支持同样的载荷方式和对象方式进行分发　　

　// 以载荷形式分发
　　　　store.dispatch('incrementAsync',{
　　　　　　amount:10
　　　　})
　　　　// 以对象形式分发
　　　　　　store.dispatch({
　　　　　　　　type: 'incrementAsync',
　　　　　　　　amount:10
　　　　　　})

 在组件中分发 Action

你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用map Actions辅助函数将组件的methods 映射为store.dispatch 调用　

import {mapActions } from 'vuex'
　　　　　　export default{
　　　　　　　　methods:([
　　　　　　　　　　'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
　　　　　　　　])
　　　　　　mapActions({
　　　　　　　　　　add: 'inctement' // 映射 this.add() 为 this.$store.dispatch('increment')
　　　　　　　　})
　　　　　　}

组合 Actions

Action 通常是异步的，那么如何知道 action 什么时候结束。

你需要明白 store.dispatch 可以处理被处触发的action 的回调函数返回的Promise并且 store.dispatch 仍旧返回Promise　

actions: {
　　　　　　　　actionA({commit}){
　　　　　　　　return new Promise((resolve)=>{
　　　　　　　　　　　　setTimeout (() => {
　　　　　　　　　　　　　　commit('someMutation')
　　　　　　　　　　　　　　resolve()
　　　　　　　　　　　　},1000)
　　　　　　　　　　})
　　　　　　　　}
　　　　　　}

现在你可以　　　

store.dispatch('actionA').then(()=>{
　　　　　　　　//...
　　　　　　})

在另一个 action 中也可以

actions: {
　　　　　　actionB({dispath,commit}){
　　　　　　　　return dispatch('actionA').then(() => { 
　　　　　　　　commit('someOtherMutation')
　　　　　　})
　　　　}
　　　　}

我们利用async/ await　

// 假设 getData() 和 getOther() 返回的是一个 Promis
　　　　actions:{
　　　　　　　　async actionA ({commit}){
　　　　　　　　　　commit('gotData',await getData())
　　　　　　　　},
　　　　　　　　async actionB({dispatch,commit}){
　　　　　　　　　　await dispatch('actionA') // 等待 actionA 完成
　　　　　　　　　　commit('goOtherData', await getOtherData())
　　　　　　　　}
　　　　　　}

Modules

使用单一状态树，当应用变的很大的时候，store 对象会变的臃肿不堪。

Vuex 允许我们将store 分割到模块。每一个模块都有自己的state, mutation,action, getters, 甚至是嵌套子模块从上到下进行类似的分割。　　　

const moduleA = {
　　　　　　　　　　state: {...},
　　　　　　　　mutations: {...}
　　　　　　　　actions: {...}
　　　　　　　　getters:{...}
　　　　　　　　}
　　　　const moduleA = {
　　　　　　　　state: {...},
　　　　　　　　mutations: {...}
　　　　　　　　actions: {...}
　　　　　　}
　　　　const store = new Vuex.Store({
　　　　　　modules: {
　　　　　　　　　　a:moduleA,
　　　　　　　　　　b:moduleB
　　　　　　　　}
　　　　　　})
　　　　store.state.a // -> moduleA 的状态
　　　　store.state.b // -> moduleB 的状态

模块的局部状态

对于模块内部的 mutation 和 getter, 接收的第一个参数是模块的局部状态。

　const moduleA = {
　　　　　　　　　　state: {count:0},
　　　　　　　　　　mutations: {
　　　　　　　　　　　　increment (state) {
　　　　　　　　　　　　　　　　// state 模块的局部状态
　　　　　　　　　　　　　　　　state.count++
　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　getters: {
　　　　　　　　doubleCount (state) {
　　　　　　　　return state.count * 2
　　　　　　　　}
　　　　　　}
　　　　}

 　　同样对于模块内部的action, context.state 是局部状态，根节点的窗台石context.rootState:　　

const moduleA = {
　　　　　　　　　　actions: {
　　　　　　　　　　incrementIfOddOnRootSum ({state, commit ,rootState}) {
　　　　　　　　　　　　if((state.count + rootState.count) %2 ===1){
　　　　　　　　　　　　　　　　commit('increment')
　　　　　　　　　　}
　　　　　　　　　}
　　　　　　　　}
　　　　　　}

 对于模块内部的getter,跟节点状态会作为第三个参数：　　　

const moduleA = {
　　　　　　　　　　getters: {
　　　　　　　　　　　　getters: {
　　　　　　　　　　　　　　sumWithRootCount (state,getters,rootState) {
　　　　　　　　　　　　　　　　　　　　　　return state.count + rootState.count
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}

命名空间

模块内部的action, mutation , 和 getter 现在仍然注册在全局命名空间    这样保证了多个模块能够响应同一 mutation 或 action. 也可以通过添加前缀 或者 后缀的

方式隔离各个模块，以免冲突。　　　

// 定义 getter, action , 和 mutation 的名称为常量，以模块名 ‘todo' 为前缀。
　　　　　　　　export const DONE_COUNT = 'todos/DONE_COUNT'
　　　　　　　　export const FETCH_ALL = 'todos/FETCH_ALL'
　　　　　　　　export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
 　　　　　　　　 import * as types form '../types'
　　　　// 使用添加了解前缀的名称定义， getter, action 和 mutation
 　　　　const todosModule = {
　　　　　　　　state : {todo: []},
　　　　　　　　getters: {
　　　　　　　　　　[type.DONE_COUNT] (state) {
　　　　　　　　　　}
　　　　　　}
　　　　actions: {
　　　　　　　　[types.FETCH_ALL] (context,payload) {
　　　　　　　}
　　　　　　},
　　　　mutations: {
　　　　　　　　[type.TOGGLE_DONE] (state, payload)
　　　　　　}
　　　　}

模块动态注册

在store 创建之后，你可以使用 store.registerModule 方法注册模块。　　　

store.registerModule('myModule',{})

模块的状态将是 store.state.myModule.

模块动态注册功能可以使让其他Vue 插件为了应用的store 附加新模块

以此来分割Vuex 的状态管理。

项目结构

Vuex 并不限制你的代码结构。但是它规定了一些需要遵守的规则：

1.应用层级的状态应该集中到单个store 对象中。

2.提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

3.异步逻辑应该封装到action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation、和 getters 分割到单独的文件对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例

├── index.html
├── main.js
├── api │ 
　　└── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store 
　　├── index.js  # 我们组装模块并导出 store 的地方 
　　├── actions.js  # 根级别的 action 
　　├── mutations.js  # 根级别的 mutation 
　　└── modules  
　　 　　├── cart.js  # 购物车模块  
　　　　└── products.js # 产品模块

以上是“vuex使用文档的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！