vue-cli项目全局使用和配置vuex

vuex

前言
vuex是什么？
官网解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我的理解就是vuex是一个管理者，管理的方式是集中式管理，管理的对象即是vue.js应用程序中的众多组件的共享部分。
正文

1. vuex官方文档：https://vuex.vuejs.org/zh/ 具体知识介绍参照官网，此文主要介绍在中大型项目中，如何更好的配置并使用vuex。
2. 安装依赖
   • 首先用npm包管理工具，安装vuex
   • 在src目录下新建store文件夹并配置
     –src
     ----store文件夹
     ------index.js–>vuex的入口文件
     ------getter.js–>vuex规范变量的文件
     ------models文件夹
     --------tabVuex.js–>主要tab模块代码实现文件
     --------newsVuex.js–>主要news模块代码实现文件
   • 然后在main.js当中引入配置vuex
   • 在使用的组件中调用

3.实现功能
兄弟组件之间的调用和改变—借鉴案例https://www.jianshu.com/p/d109e16d5f9a
全文共7章，（写的很全很容易理解）

4.详细代码如下

• 安装

1、cnpm install vuex --save

• 在store/index.js–>vuex的入口文件配置vuex

import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
import news from './modules/new'//引入tab模块代码
import tabVuex from './modules/tabvuex'//引入news模块代码
import getters from './getters'//规范变量的文件
Vue.use(Vuex); //使用 vuex

const store = new Vuex.Store({//创建vuex中的store对象
    getters,
    modules:{
        news,tabVuex
    }
})
export default store

• main.js当中引入配置vuex

import Vue from 'vue'
import App from './App'
import store from './store'//主要代码
import axios from "axios";//配置axios请求
Vue.config.productionTip = false
axios.defaults.withCredentials = true

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,'//主要代码
  render: h => h(App)
})

• 新建table.vue

• 在modules/tabvuex.js配置vuex

import axios from "axios";
const tabVuex = {
    state: {
        tagList: []
    },
    mutations: {
        SET_TAGLIST(state, v) {//这里的state即是上面定义的state常量
            state.tagList = v;
        }
    },
    actions: {
        getTaglist: (context) => {
            axios.get("/static/list.json").then(data => {
                context.commit('SET_TAGLIST', data.data);
            });
        }
    }
}
export default tabVuex

• 新建news.vue文件

• 在modules/news.js配置vuex

const news = {
    state: {
        nodeVoteCount: 0,//node的初始票数
        vueVoteCount: 1,//vue的初始票数
    },
    mutations:{
        ADD_NODE(state) {
            state.nodeVoteCount++
        },
        ADD_VUE(state, num = 2) {
            state.vueVoteCount += num
        },
    }
}
export default news

• getter.js文件定义变量

const getters = {
    sumCount:state=> state.news.nodeVoteCount+state.news.vueVoteCount,
    nodeVoteCount:state=> state.news.nodeVoteCount,
    vueVoteCount:state=> state.news.vueVoteCount,
    tagList:state=> state.tabVuex.tagList,
}
export default getters

5. 注意点

• 在vue文件中可以通过$store.state.new.vueVoteCount获得vueVoteCount的状态值,为了简写，所以在getter.js下重新命名了 $store.state.new.vueVoteCount为vueVoteCount，页面就直接渲染{{vueVoteCount}}。
• 通过ES6的对象解构赋值 import {mapState} from “vuex”;更方便了在vue文件中的调用。使用…展开运算符继续简化。
• 在计算属性中写：getter和state的代码，

computed:mapState({
    vueVoteCount:state=>state.vueVoteCount,
    nodeVoteCount:state=>state.nodeVoteCount
})
简化为：
  computed: {
     ...mapState(['nodeVoteCount','vueVoteCount']),
     ...{
  	 //  在这里写vue文件的本身的计算属性
     }
  },

• 状态(state)里面的数据是动态变化的，而要改变状态内数据的唯一的方法就是通过mutation!也就是说mutation内可以存放一些改变状态的逻辑方法。
• Vuex 建议我们mutation需要用大写常量来表示方法，目的是与action进行区分！
• 在vue文件的methods中调用mapMutations，这样简写后调用时，就可以和平时一样调用；也可以通过store.commit来调用mutations的addVueVoteCount方法

 methods:{
            ...mapMutations(["ADDVUEVOTE","ADDVUEVOTE"]),
            ...{
                //写自己定义的方法
            }
        },
cread(){
        this.ADDVUEVOTE（）
}
        

• 对多个 state 的操作 , 使用 mutations 来操作比较好维护 , 但mutations 只可以写一些同步操作，那异步操作放到哪里呢？比如咱们的axios放在哪里比较合适呢？在这个时候咱们就可以用到action了。通过action来操作mutations最终来改变state的值。

 actions: {
        getTaglist: (context) => {
            axios.get("/static/list.json").then(data => {
            发请求调取值，给mutations的方法赋值
                context.commit('SET_TAGLIST', data.data);
            });
        }
    }

*使用 this.$store.dispatch(“getTagList”);调用；也可简写为

 ...mapActions(["getTagList"])

注：
取值：$store.state
赋值： $store.commit
调取方法： $store. dispatch