vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，是我们需要共享的data，使用vuex进行统一集中式的管理。

state：保存的是状态（变量），相当于全局变量的仓库，可以在组件中调用，也可以修改。
getters：对数据获取之前的再次编译，可以理解为state的计算属性，对数据进行过滤等。调用方法：this.$store.getters.方法名
mutations：修改状态，并且是同步的，在组件中使用

this.$store.commit(" ",params)

actions：异步操作。在组件中使用是$store.dispath('')
modules：store的子模块，为了开发大型项目

1、安装vuex

$ npm install vuex --save

2、在main.js导入并挂载到vue的实例上

import Vue from 'vue'
import Vuex from 'vuex'
Vue use(Vuex)
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

3、在src下新建store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
        author:'mirs chen'
    },
    getters:{

    },
    mutations:{
        newAuthor (state, msg) {
            state.author = msg;
        }
    },
    actions:{

    },
    modules:{

    }
})

export default store

4、获取vuex定义的状态
①通过this.$store.state.name（...mapState）来获取state中的状态

要先在vue中引用
import {mapState } from vuex

created(){
  let name = this.$store.state.name
},
computed:{
    getValue(){
        return this.$store.state.value
    }
//或者...mapState获取
    ...mapState([
      'value'
    ])
}

②通过this.$store.getters.getter名 对state中的状态进行计算过滤

getters:{
  editName(state){
    return state.name+"hel"
  }
}

import {mapGetters} from vuex
computed:{
   newName(){
    return this.$store.getters.editName
  }
}

③通过this.$store.commit(state,msg)名 来改变state中的状态

this.$store.commit('editName','lucy')

store.js中
mutations:{
    editName(state,msg){
      state.name = msg
    }
}

④异步this.$store.dispatch("asyncMet");

sotre.js中
actions:{
     asyncName({commit}) {
        commit('edit')
      },
}

import {mapActions} from vuex
methods:{

 this.$store.dispatch("asyncMet");

  ...mapActions:([
    'asyncMet'
])
}

5、vuex数据持久化
vuex-persist保存vuex仓库并保存到本地
①下载

  $ npm install vuex-persist -S

②在store文件中引用

  $ import   VuexPersist   from   'vuex-persist';

③创建并保存到本地

const   vueLoca=new vuexPersist({
      storage:window.localStorage 
      //storage:window.sessionStorage
  })

④在创建的vuex实例中添加

var   store =  new   vuex.Store({
        plugins  :  [  vueLoca.plugin  ]
    })

大体如下：

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

import VuexPersist from 'vuex-persist'
const vuexLocal = new VuexPersist({
    storage:window.sessionStorage
});

const store = new Vuex.Store({
    plugins:[vuexLocal.plugin]
})

export default store