vuex的基础入门

当我们的应用遇到多个组件共享状态时，多个视图依赖于同一个状态，来自不同视图的行为需要变更同一状态，需要用到vuex解决需求

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。

vuex的使用

mutation-可以看出mutation是用来修改数据的方法，我们为什么不直接new一个State来改数据呢？而是在mutation里传入数据再commit提交来修数据呢？vuex这样做是为了跟方便的记录下数据的变更记录和轨迹，为了后面的监听和回滚之类的操作

action-为了更方便的操作mutaion一些异步操作等，就是在mutation外包裹了一层方法

getters-从基本数据派生的数据

state-基础数据

新建一个store文件下的index.js文件

import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
// 创建容器对象
const stroe = new Vuex.Stroe({
	// 容器数据
    state: {
        count:0  // 在组件模板中使用直接通过$store.state.count
	},
    // 容器的方法放到mutations，修改容器数据必须通过mutations
    mutations: {  // mutations函数中只能传递一个自定义参数
        // state是内置参数
    	setState (state, data) {
            // 0 = 123
            state.count = data
            sessionStorage.setItem('globalCount', data)
        }  // 在组件模板中使用$store.commit('haha', '123')
	},
    // 主要用来执行异步操作，提交mutation
    // actions有默认参数--容器对象，在acution中不能修改容器数据
    actions: {
        promiseCommit((context) => {
        	setTimeout(() => {  // 执行异步操作
	        	context.commit('setState', '456')
	        }, 1000)
        })
    },
    getters: {
        getCount (state) {
           return  state.count ? state.count : sessionStorage.getItem('globalCount')
        },
        // getters返回函数 来完成传参
        getComputedCount: (state) => (id) => {
			return state.count + id
        }
    }
})
export default store 

在main.js中引入

import store from './store'
// 为了在 Vue 组件中访问 this.$store property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在项目中任何地方使用

<template>
	<div>
	{{ count }}
	</div>
</template>
export default {
	data () {
		return {
			count: this.$store.getters.getCount // 0
			computedCount: this.$store.getters.getComputedCount(2) // 2
		}
	},
	mounted () {
		// 同步修改vuex数据
		this.$store.commit('setState', 777)
		// 异步修改vuex数据
		this.$store.dispatch('promiseCommit')
	}
}