vuex，官方定义为状态管理，其实这个状态管理，和H5本地缓存的作用很相似，通俗的讲，就是存储一些公用的东西，提供给各个组件使用，和服务器端的session功能也很类似。

不同的是，vuex在刷新页面的时候，会自动还原到初始的状态，话不多说，我们直接上干货：

1.安装vuex:npm install vuex --save

2.需要在man.js中引用如下代码

import Vue from 'vue'import App from './App'import router from './router'import vuex from 'vuex'Vue.config.productionTip = falseVue.use(vuex)new Vue({  el: '#app',  router,  components: { App },  template: '
     '})

 

3.在根目录下新建vuex文件加，新建文件store.js,在js文件中，写如下代码：

import vue from 'vue'import Vuex from 'vuex'vue.use(Vuex)const state={    count:1}const mutations={    add(state){        state.count++;    },    reduce(state){        state.count--;    }}export default new Vuex.Store({    state,mutations})

说明：count:1是一个状态管理的属性，这里你可以设置自己的属性，例如：loginstate:object

const mutations是一个固定的写法，这里的作用是修改state中的属性，如count，里面的方法可以自己的定义. 若要传参的话，只能传递一个参数，如：

add(state){        state.count++;    }方法，如果要传递参数，只能传递一个参数写成：

add(state，parameters){       ....    }

4.前端调用：

4.1在页面引用vuex,

import store from "@/vuex/store";

在选项中申明一下store

代码如下：

export default {  name: "HelloWorld",  data() {    return {      msg: "Welcome to Your Vue.js App"    };  },  store,  computed: {    },  methods: {     }

4.2在页面中使用store,

方式一：

{

{$store.state.count}}

方式二：

如觉得方式一的写法不太好看，比较长，可以在computed中做如下操作：

computed: {    computedcount() {      return this.$store.state.computedcount;    }}

这样就可以在页面中直接调用{

{computedcount}}

方式三：

也可以引用vuex里的

mapState

引用方式如下：

import { mapState} from "vuex";

然后可以在computed中做如下操作：

...mapState({      mapcount: state => state.mapcount    }),    ...mapState(["mapcount"]),

这两种写法都可以，页面使用的时候，直接{

{mapcount}}

5.修改状态

修改状态，需要使用commit，以上代码中已经写好了添加和减少的方法，可以有两种方式进行操作：

方式一：

<button @click="$store.commit('add')">相加</button>

<button @click="$store.commit('reduce')">相减</button>

方式二：

<button @click="add()">Mutaions传参相减</button>

方式二需要引用mapMutations,应用方式如下：

import { mapMutations } from "vuex";

然后在选项：

methods中写如下代码：

...mapMutations([

“add”

])

以上就是vuex的基本使用了，剩下还有一些选项，如果弄清楚了以上这些，剩下的也不是什么问题了