vueX 学习笔记

vuex 在官方文档中是这样介绍的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

首先安装：

npm install vuex

然后新建store.js,写入以下代码：

import vue from 'vue'
import Vuex from 'vuex'

vue.use(Vuex)
const modelsa = { // 【这里要特别注意： 子module 只是有store的接受数据结构，但是不是Vuex.Store的实例】
    namespaced: true, // 如果开启，在使用 mutations 或 getters actions 的时候读取时需要添加module的名字 modelsa，像这样 this.$store.commit('a/addAge', 15)
    state: {
        name:   
    },
    mutations: {
        addAge (state, n) {}
    },
    actions: {
        checkAndAdd ({ state, commit, rootState }) { // state是模块本身的state, rootState是根store的state, commit触发的方法，所有的store都会响应
        }
    }
}
const store = new Vuex.Store({
  state: {
    name: 'abai',
    age: 18
  },
  mutations: {
    // 只能放置同步方法
    addAge (state, n) { 
          //【 注意】方法只接受两个参数，state是store自己传入的参数，用户只能传入一个参数，多的参数会被忽略，actions方法同样如此
      state.age += n
    },
    minuAge (state, n) {
      state.age -= n
    }
  },
  actions: {
    // 只能设置异步的方法，要改变state需要调用mutations的方法来更改state
    getWebAge (context, data) {
      setTimeout(() => {
        context.commit('addAge', data)
      }, 500)
    }
  }，
getters: {
        // 为了方便获取对某些state属性处理后的结果，方法可以写在这里，类似计算属性，会缓存结果
        info: state => {
            return `姓名：${state.name}, 年龄${state.age}岁了`
        },
        compare: state => (age) => {
            // 可以通过设置方法来接收参数，根据参数处理state并返回结果
            return state.age > age
        }
    },
modules: {
    a: modelsa, 
    // modules里的值每个都是一个单独的store，有自己的state mutations等，但是所有的属性都会暴漏在全局对象中
    b: modelsb
}
})

export default store

** 然后在入口文件中引入store,并作对vue对象属性注入到vue实例中**

import store from './store'
import Vue from './vueMode'


new Vue({
    el: '#app',
    store,
    render: h=> h(App)
})

**这样以后在实例中都可以通过以下方式调用：**

// 读取state属性
console.log(this.$store.state.name)
// 调用mutations 方法
this.$store.commit('addAge', 15)
// 调用actions方法
this.$store.dispatch('getWebAge',  20)
// 访问getters属性
console.log(this.$store.getters.info)
// 访问store 的modules里的值
console.log(this.$store.state.a.name)
    // 相应的，mapState如果用modules里的属性也要像下面这样
computed: {
    ...mapState(['a/name'])
}

为了方便对state/mutations/actions/getters四大金刚的读取（主要是减少键入），
store 提供了mapState, mapGetters, mapActions, mapMutations方法，??便读取，这里用mapGetters举例
利用mapGetters ，可以简单的将getters的结果混入到computed属性中

import { mapGetters } from 'vuex'
 
computed: {
    ...mapGetters([
        'doneTodosCount',
        'anotherGetter',
        // ...
    ])
}
        // 也可以对属性重命名
computed: {
    ...mapGetters({
        count:'doneTodosCount',
        another: 'anotherGetter',
    })
}

官网地址：https://vuex.vuejs.org/zh/guide/