Vue 中的store 的使用

在我们开发vue项目的时候， 创建项目中会有一项配置询问是否使用vuex 这里的vuex就是状态管理器，在实际项目开发中，这个东西可以帮助我们完成一些数据的存储和管理。接下来我们来了解一下目录构建：

1.state -->状态树：定义需要管理的数组、对象、字符

2.getter --> 类似计算属性，当需要从store的state中派生出一些状态，就需要使用getter，getter会接受state作为第一个参数，
而getter的返回值会根据它的依赖缓存起来，只有getter中的依赖值发生改变才回重新计算

3.mutation --> 更改store中state状态的唯一方法就是提交mutation。每个mutation都有一个字符串类型的事件和一个回调函数，
我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit

4.action -->action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的一步操作。在页面中如果
要使用action，则需要执行store.dispatch

5.module -->module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个
模块中拥有自己的state，mytation，action和getter实例操作
1.引入vuex状态管理模式 --> npm install vuex --save
2.创建store文件夹，建立store.js --> 在store.js中引入vue 和 vuex

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

import getters from 'getter.js所在位置'

import user from 'user.js所在位置'

const stroe = new Vuex.Store({
  modules:{
     user
  },
  getters
})
export default store

getter.js文件 -->

const getters = {
   name: state => state.user.name,
}
export default getters

user.js文件 -->
 

const user = {
   state:{
      name: ""
   },
   mutations:{
     setName:(state, name) =>{
        state.name = name
    },
   actions:{
       commitName({commit}, name){
          commit("setName", name)
       }
   }
}
export default user

页面使用： 

<script>
import store from 'store.js的路径'
data(){
    return{
        name:store.getters.name;//引入getters中的对象
    }
},
methods:{
    useAction(){
            var item="张三";
            store.dispatch('setName',item);
    }
}
</script>