vuex学习记录

vuex学习

安装并引入

• 安装npm install vuex --save

• 引入并使用

  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
      state:{},
      getters:{},
      mutations:{},
      actions:{},
      modules:{}
  })
  
  

核心

1. state

相当于vue组件实例中的data()，不同的是data()是一个函数，有返回值，而state是一个对象属性，没有返回值

src/store/index文件夹

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

export default new Vuex.Store({
    state:{
        num: 0
    },
    getters:{},
    mutations:{},
    actions:{},
    modules:{}
})

• 使用数据

  <h2>
      {{$store.state.num}}
  </h2>
  <--!或者再计算属性中返回后直接使用num方法
     computed: {
  		// num(){
  		// 	return this.$store.state.num
  		// }
  	},    
  -->
  

2. getters

相当于vue组件中的计算属性computed，写法也和computed相同

src/store/index文件夹

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

export default new Vuex.Store({
    state:{
        num: 0
    },
    getters:{
        gettersNum(state){
            return state
        }
    },
    mutations:{},
    actions:{},
    modules:{}
})

当state中的数据较多时，继续在组件中的计算属性中定义会不方便，可以在getters中定义

• 使用

  $store.getters.gettersNum.num

3. mutations

mutations中不能使用异步方法（定时器，axios等）

vuex中state的数据在组件内时不能改变过的，在组件内通过直接更改的确会使页面中的数据改变，但是存在vuex中的数据时不会改变的，想要改变store状态的唯一方法只有通过提交mutations的方式，mutatios有两个参数，第二个参数时在组件中调用时需要传递的数据，如果没有，就是undefined

src/store/index

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

export default new Vuex.Store({
    state:{
        num: 0
    },
    getters:{
        gettersNum(state){
            return state
        }
    },
    mutations:{
        add(state,a){
            state.num+= a ? a: 1
        }
    },
    actions:{},
    modules:{}
})

提交mutations,.vue结尾的组件中

methods:{
    add(){
        this.$store.commit('add',3)
    }
}

通过点击事件的方式使用

<button @click="add()">增加</button>

4. actions

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

src/store/index文件夹

import Vue from 'vue'
import Vuex from 'vuex'
import http from '../http.js'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 0
    },
    getters: {
        gettersNum(state) {
            return state
        }
    },
    mutations: {
        add(state, a) {
            state.num += a ? a : 1
        },
        jian(state) {
            state.num--
        }
    },
    actions: {
        asyncFn(context) {
            let id = new FormData()
	        id.append('id','852')
            http.post("/index.php/home/qita/qi_cpxq", id)
                .then((res) => {
                    console.log(res.data);
                    context.commit('jian')
                })
        }
    },
    modules: {}
})

src/view/home.vue文件夹

<template>
	<div>
		<button @click="add()">增加</button>
		<button @click="asyncFN()">减少</button>
		<hr>
		这是store的数据--->{{$store.getters.gettersNum.num}}
	</div>
</template>

<script>
import VueEvent from './cang.js'
export default {
	methods:{
		add(){
			this.$store.commit('add',3)
		},
		asyncFN(){
			this.$store.dispatch('asyncFn')
		}
	}
}
</script>

5. map*辅助函数

mapState和mapGetters

• 这两个是写在计算属性computed里面

mapMutations和mapActions

• 这两个是写在methods里面
• 需要传递的参数可以在调用的时候传

<template>
	<div>
		<button @click="add(2)">跳转</button>
		<button @click="jian()">减少</button>
		<button @click="asyncFn()">异步减少</button>
		<hr>
		<br>--->这是store的数据{{num}}<br>
		<br>--->这是store的数据{{gettersNum}}
	</div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
	computed: {
		...mapState(['num']),
		...mapGetters(['gettersNum'])
	},
	methods:{
		...mapMutations(['add','jian']),
		...mapActions(['asyncFn'])	

	}
}
</script>

6. 拆分写法

vuex中所有的属性都可以拆分为单独的js文件

7. modules

分为主模块和子模块