vue状态管理（vuex）

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 = false
Vue.use(vuex)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

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,

方式一：

方式二：

如觉得方式一的写法不太好看，比较长，可以在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="add()">Mutaions传参相减</button>

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

import { mapMutations } from "vuex";

然后在选项：

methods中写如下代码：

...mapMutations([

“add”

])

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

vue状态管理（vuex）

猜你喜欢