下载vuex

npm install --save vuex    // vuex复制代码

引用vuex

import store from './vuex/index'复制代码

在vue实例里面使用vuex

import store from './vuex/index'new Vue({      el: '#app',      router,      store,      components: { App },      template: '
     ',  mounted () {            document.dispatchEvent(new Event('render-event'))      }})复制代码

在vuex里面的index.js 引用

import Vue from 'vue'import Vuex from 'vuex'import home from './modules/home'Vue.use(Vuex)const store = new Vuex.Store({  modules: {    home  }})export default store复制代码

特点：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

3. vuex是单一状态树

核心概念：

state：可以理解为vuex的data 是一个对象

示例：

// vuex里面的初始数据  这里要注意，把数据返回出去  在getter里面使用的值，一定要在这里先声明export default {         productInfos: [],        productInfosTwo: null,}复制代码

getter：理解为vuex的计算属性

示例：

// 此处state为state里面的赋值的数据   localStorage为在mutations.js里面存的数据  // 在公用js里面可以用提供的mapGetters方法来获取数据export function productInfosData (state) {        // 要把json字符串转化为json对象        let productInfos = state.productInfos || []        return productInfos}export function footerData(state) {        let footerData = state.footer || []        return footerData}复制代码

mutation：处理数据的地方，项目中通过请求得到的数据都在这里处理，在赋值给state，在需要的地方在通过vuex来获取

示例：

// 获取客户案例数据export function casesData (state, data) {        state.casesData = data}// 获取合作运营方案数据export function schemeData (state, data) {        state.schemeData = data}复制代码

Mutation 需遵守 Vue 的响应规则

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

1. 最好提前在你的 store 中初始化好所有所需属性。

2. 当需要在对象上添加新属性时，你应该

• 使用 Vue.set(obj, 'newProp', 123), 或者

• 以新对象替换老对象。例如，利用 stage-3 的

  我们可以这样写：

• state.obj = { ...state.obj, newProp: 123 }复制代码

action：

1.Action 提交的是 mutation，而不是直接变更状态。

2.Action 可以包含任意异步操作（比如ajax等）

一般在action中请求ajax，在通过commot调用mutation中的方法，把数据传过去，当刷新页面的时候要用本地存储进行缓存（记得对象要转换为josn字符串，取得时候再转换回来），刷新页面的时候store也会刷新

示例：

// 请求banner轮播图数据export async function bannerImg (context, params) {
         // context 里面为vuex对象      // 如果要改变this指向 就要在外面调用得时候用apply来改变 传进来        let that = this        const res = await http(ApiSetting.bannerImg, params)        context.commit('bannerImgData', res.data)    // 一般不会改变this指向，在最后面把 res给返回出去}// 请求footer数据export async function footer (context, params) {        let that = this        const res = await http(ApiSetting.footer, params)        context.commit('footerData', res.data)}   // 点击不处理export async function notHandle(context, params) {        let data = {        id: params.id,        returnInfo: ''    };        const res = await req.post(sendInfo, data);        return Promise.resolve(res);      // 如果在外面要用这个得话，可以通过prmise return出去}复制代码

创建的结构：

在最外面的index.js调用vuex里面的index.js 

import store from './vuex/index'new Vue({  el: '#app',  router,  store, // 引用  components: { App },  template: '
     ',  mounted () {        document.dispatchEvent(new Event('render-event'))  复制代码

在vuex里面的index.js 中赋值实例对象

import Vue from 'vue';import Vuex from 'vuex';import user from './modules/user';import command from './modules/command';Vue.use(Vuex);const store = new Vuex.Store({  modules: {    user,    command  }});export default store;复制代码

使用vuex中应注意的点

1. state每个模块都可以设置一个，总的也可以设置一个

在 Vuex 模块化中，state 是唯一会根据组合时模块的别名来添加层级的，后面的 getters、mutations 以及 actions 都是直接合并在 store 下。

2.getter和state不同，不同模块的 getters 会直接合并在 store.getters 下，直接调用即可

3.getters 的回调函数所接收的前两个参数，模块化后需要用到第三个参数——rootState。参数： 1. state，模块中的 state 仅为模块自身中的 state；2. getters，等同于 store.getters；3. rootState，全局 state。

通过 rootState，模块中的 getters 就可以引用别的模块中的 state 了，十分方便。

注意：由于 getters 不区分模块，所以不同模块中的 getters 如果重名，Vuex 会报出 'duplicate getter key: [重复的getter名]' 错误。

4.mutations 与 getters 类似，不同模块的 mutation 均可以通过 store.commit 直接触发。

mutation 的回调函数中只接收唯一的参数——当前模块的 state。如果不同模块中有同名的 mutation，Vuex 不会报错，通过 store.commit 调用，会依次触发所有同名 mutation。

5.与 mutations 类似，不同模块的 actions 均可以通过 store.dispatch 直接触发。action 的回调函数接收一个 context 上下文参数，context 包含：state、 rootState、getters、mutations、actions 五个属性，为了简便可以在参数中解构。可以在加个参数，把请求到的数据传给mutation中去

在 action 中可以通过 context.commit 跨模块调用 mutation，同时一个模块的 action 也可以调用其他模块的 action。

同样的，当不同模块中有同名 action 时，通过 store.dispatch 调用，会依次触发所有同名 actions。

6.将 store 中的 state 绑定到 Vue 组件中的 computed 计算属性后，对 state 进行更改需要通过 mutation 或者 action，在 Vue 组件中直接进行赋值 (this.myState = 'ABC') 是不会生效的。

使用vuex的方法和一般流程：

在需要调用的地方使用vuex提供的dispatch方法，调用action里面的方法请求数据，在action方法中使用commit方法调用mutations中的方法，把数据存在state中，改变state中的值，在需要的地方使用gtters获取改变的值，注意在页面刷新的时候，要存储在本地存储中