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: {
        // actions函数中只能传递一个自定义参数
        setTimeout((context) => {  // 执行异步操作
        	context.commit('changeCount',{
        		
    		},1000)
        })
    },
    getters: {
        // 接受两个参数 
        getCount (state, getters) {
           return  state.count + getters.getCount.length
        },
        // getters返回函数 来完成传参
        getComputedCount: (state) => (id) => {
			return state.count + id
        }
    }
})
export default store 

在main.js中引入

import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')