vue常用操作及学习笔记（Vuex）

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用 集中式存储 管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vue核心概念

State

Vuex store实例的根状态对象，用于定义共享的状态变量。

Getter

读取器，外部程序通过它获取变量的具体值，或者在取值前做一些计算（可以认为是store的计算属性）

Mutation

修改器，它只用于修改state中定义的状态变量。

Action

动作，向store发出调用通知，执行本地或者远端的某一个操作（可以理解为store的methods）

Module

vuex在vue-cli中的应用

第一步：npm下载vuex资源包：

npm install vuex -S

第二步：在 src 下创建文件夹，在 src 下创建 store.js ，官方推荐项目结构

store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './store/getters' // 导入响应的模块，*相当于引入了这个组件下所有导出的事例
import * as actions from './store/actions'
import * as mutations from './store/mutations'
Vue.use(Vuex)

// 首先声明一个需要全局维护的状态 state,比如 titelName
const state = {
  titelName: '小A的大标题' // 默认值
  // id: xxx  如果还有全局状态也可以在这里添加
  // name:xxx
}
export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', //在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。不要在发布环境下启用严格模式以避免性能损失！
  state,    // 共同维护的一个状态，state里面可以是很多个全局状态
  getters,  // 获取数据并渲染
  actions,  // 数据的异步操作
  mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
})

getter.js 文件

// 获取最终的状态信息
export const titelName = state => state.titelName

actions.js 文件

// 给action注册事件处理函数。当这个函数被触发时候，将状态提交到mutations中处理
export function modifyAName({ commit }, name) { // commit 提交；name即为点击后传递过来的参数，此时是 'A餐馆'
    return commit('modifyAName', name)
}
// export const modifyAName = ({commit},name) => commit('modifyAName', name)
export const modifyBName = ({ commit }, name) => commit('modifyBName', name)

mutations.js 文件

// 提交 mutations是更改Vuex状态的唯一合法方法
export const modifyAName = (state, name) => {
    state.titelName = name // 把方法传递过来的参数，赋值给state中的titelName
}
export const modifyBName = (state, name) => {
    state.titelName = name
}    

router.js 文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import componentA from './components/componentA.vue'
import componentB from './components/componentB.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/componentA',
      name: 'componentA',
      component: componentA
    },
    {
      path: '/componentB',
      name: 'componentB',
      component: componentB
    },
  ]
})

componentA.vue 文件

componentB.vue 文件

//第三步：在 src/main.js 中引入    
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({  
  router,
  store,
  render: h => h(App)
}).$mount('#app')

如何在组件中去使用vuex的值和方法

直接获取、修改

//state
this.$store.state.count
//getter
this.$store.getters.count
//调用 action 修改 state 值，不带参数
this.$store.dispatch('increment');
//调用 action 修改 state 值，带参数
this.$store.dispatch('increment',{value :123});

通过 辅助函数 获取、修改vuex

vuex提供了三种辅助函数用于获取、修改vuex：
mapState、mapGetters、mapActions
即将vuex的变量或者方法映射到vue组件this指针上。

使用state获取共享变量

使用getters获取共享变量，

使用actions修改共享变量