vue.js使用vuex

官网：https://vuex.vuejs.org/zh/

computed和watch区别：https://www.jianshu.com/p/a69a9bac9dc3

1.安装vuex：https://vuex.vuejs.org/zh/installation.html

npm安装方式，vscode中执行命令：npm install vuex --save，开发、生产皆需要

2.创建文件/src/store/index.js导入vue和vuex：import Vue from 'vue'/import Vuex from 'vuex'/Vue.use(Vuex)，使用Vue.use(Vuex)这一句，会执行Vuex的install方法来初始化vuex。

3.创建vuex对象：const store = new Vuex.Store({state:{},mutations:{},actions:{},getters:{},modules:{}});

4.导出vuex store对象：export default store

5.在main.js中引用store：import store from './store'，并注入到全局变量中，这样在xxx.vue文件中就可以使用了，示例：{{$store.state.moreCount}}

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

6.修改state的时候，使用mutations来修改，插件(devtools)记录state变化前后的值，方便调试；当修改state前有异步操作(网络请求)的时候，使用actions，在actions中再使用mutations修改state。

7.mutations示例：increment(state, payload) {state.count += payload.step;}，state是默认的参数，payload参数可选。

调用mutations示例：add() {this.$store.commit("increment", { step: 10 });}或者add() {this.$store.commit({type:"increment", payload:{ step: 10 }});}，两种提交方式payload参数略有不同，第二种payload是包含了type的一个对象。

mutations命名可以使用字符串：['add'](){...}，把mutations的方法名字抽出来放到mutations-type.js里。

8.getters，类似计算属性，参数：state, getters, rootState, rootGetters，使用的时候直接写this.$store.getters.stus1，参数是自动的，不需要传。

stus1(state, getters, rootState, rootGetters) {
            return state.stus.filter(x => x.age > 10);
        },
        stus1Length(state, getters, rootState, rootGetters) {
            return getters.stus1.length;
        },

getters传参：在getters里return一个带参数的function就行了

stus2(state) {
            // return function (age) { 
            //     return state.stus.filter(x => x.age > age);
            // }

            // 简写
            return (age) => {
                return state.stus.filter(x => x.age > age);
            }
        }

使用：this.$store.getters.stus2(18)，会把大于18的全部查出来。

9.actions，当有异步操作时，在actions中完成。调用actions：this.$store.dispatch('aUpdateInfo',{name:'jay'});第二个参数是payload。

示例代码：

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

const stus = [{ name: 'jay1', age: 16 }, { name: 'jay2', age: 20 }, { name: 'jay3', age: 30 }];
const store = new Vuex.Store({
    state: {
        count: 100,
        moreCount: 0,
        stus: stus
    },
    mutations: {
        increment(state, payload) {
            state.count += payload.step;
        },
        decrement(state, payload) {
            state.count -= payload.step;
        },
        updateCount(state, payload) {
            state.moreCount = state.count * payload.multipleQty;
        }
    },
    actions: {
        updateInfoActions(context) {
            setTimeout(() => {
                context.commit('updateCount', { multipleQty: 20 });
            }, 1000);
        }
    },
    getters: {
        // 计算属性
        powerCount(state, getters) {
            return state.count * state.count;
        },
        stus1(state, getters, rootState, rootGetters) {
            return state.stus.filter(x => x.age > 10);
        },
        stus1Length(state, getters, rootState, rootGetters) {
            return getters.stus1.length;
        },
        stus2(state) {
            // return function (age) { 
            //     return state.stus.filter(x => x.age > age);
            // }

            // 简写
            return (age) => {
                return state.stus.filter(x => x.age > age);
            }
        }
    },
    modules: {}
})
export default store