Vuex总体案例详解

目录

• 一、简介
• 二、优点
• 三、使用步骤

• 1. 安装Vuex
• 2. 引用Vuex
• 3. 创建仓库Store

• 1. State
• 2. Getters
• 3. Mutations
• 4. Action
• 5. Modules

• 1. 存储数据
• 2. 获取数据
• 3. store文件目录结构

• index.js
• state.js
• mutations.js
• actions.js
• getters.js

npm install vuex --save

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

//创建一个 store
const store = new Vuex.Store({});

 //创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });

const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count * 3
   }
});

export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};  

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    // mutations是修改state中数据的唯一途径
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

 methods: {
   getVal(event) {
     //获取当前的按键的值
     let value = event.target.dataset.value;
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", value);
   }
 }

export default {
  computed: {
      count(){
          return this.$store.state.count;
      }
  }
};  

export default new Vuex.Store({
    //存放数据
    state: {
        obj: {},
    },
    //4. 通过commit mutations中的方法来处理
    mutations: {
        getParam(state, Object) {
            //5.修改state中的数据
            state.obj = Object
        }
    },
    //2.接受dispatch传递过来的方法和参数
    actions: {
        getParamSync(store, Object) {
            // 处理异步操作
            setTimeout(() => {
                //3.通过commit提交一个名为getParam的mutation
                //action 函数接收一个 store 的实例对象，因此你可以调用 store.commit 提交一个 mutation
                store.commit('getParam', Object);
            }, 1000)
        }
    }
})

methods: {
   getVal() {
	  let name= 'xia';
	  let age= '26';
	  let sex= 'man';
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',{name,age,sex})
   }
}

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'
import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B
Vue.use(Vuex)
export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    modules: {
        moduleA,
        moduleB
    }
})

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

<template>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</template>

computed: {
    getText1(){
    	return this.$store.state.moduleA.text;
    },
    //或
	...mapState({
		getText2: state => state.moduleB.text;
	})
}

import { mapMutations } from "vuex"; // 引入mapMutations
export default {
	methods: {
		...mapMutations({
		    // 将changeNews与mutations中的SET_NEWS关联
		    changeNews: "SET_NEWS"
		}),
		submit(){
			// 提交一个名为changeNews的mutation，并传入参数val
			let val = 'test news';
			this.changeNews(val);// 相当于this.$store.commit("changeNews", val);
		}
	}
}

import { mapGetters } from "vuex"; // 引入mapGetters 
export default {
	computed: {
        // 用vuex读取数据(读取的是getters.js中的数据)
        // 相当于this.$store.getters.news(vuex语法糖)
        ...mapGetters(["news"])
	},
	created() {
        // 获取getters中news数据
        console.log(this.news);
	}
}

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'
//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
	actions,
	getters,
	state,
	mutations,
	strict: debug, // 当debug=true时开启严格模式(性能有损耗)
	plugins: debug ? [createLogger()] : []
})

const state = {
	news: {}
}
export default state;

const mutations = {
	SET_NEWS(state, val) {
		state.news= val
	}
}
export default mutations;

//异步处理
const actions = {
    M_NEWS({ commit }, val) {
        commit('SET_NEWS', val);  // commit mutations修改
    }
}
export default actions;

// 通常通过getters取数据 (this.$store.getters.news;)
export const news = state => state.news  // 不做其他处理 直接映射出去

import store from './store' //vuex存储文件
new Vue({
	el: '#app',
	router,
	store,
	components: {
		App
	},
	template: '<App/>'
})